☰

CSS 및 IE7로 부동 소수점을 지우시겠습니까?

tag-icon • tag-icon internet-explorer html css internet-explorer-7
CSS 및 IE7로 부동 소수점을 지우시겠습니까?

나는 이전 버전의 Internet Explorer에서 플로트 및 클리어가 제대로 작동하도록 하기 위해 하루 동안 머리를 부딪혔습니다. .clear:after 트릭 등을 사용하는 방법에 대한 수많은 튜토리얼을 읽었지만 실제로 작동하는 방법은 없습니다!

나는 다음과 같은 HTML을 가지고 있습니다 :

<div id="section">
  <h2>Section Title</h2>

  <label for="name">Name</label>
  <input type="text" id="name" />

  <label for="dob">Date of Birth</label>
  <input type="text" id="dob" />

  <label for="email">Email</label>
  <input type="text" id="email" />
</div>

CSS는 다음과 같습니다.

#section {border:solid 2px #b7ddf2; background:#ebf4fb; margin-top: 20px;}
#label{clear: left; float: left; width: 300px; margin-left: 20px; margin-bottom: 10px;}
#input{float: left; margin-bottom: 10px;}

Opera 25와 같은 최신 브라우저에서는 다음과 같이 표시됩니다.

Name            [Name field]
Date of birth   [Date of birth field]
Email           [Email]

이전 버전의 Internet Explorer(6 또는 7)에서는 다음과 같이 표시됩니다.

Name            [Name field] [Date of birth field] [Email field]
Date of birth
E-mail

HTML을 조정하고 싶지 않습니다. CSS 문제를 해결하는 데 도움을 줄 수 있는 사람이 있습니까?

답변1

당신이 하려는 일은 나쁜 생각입니다. 첫째, 새로운 웹 애플리케이션에서 IE6을 지원하기 위해 이렇게 많은 노력을 해서는 안 되고, 둘째로 HTML 구조가 유연하지 않고 매우 특정한 시나리오에서만 작동하기 때문입니다.

그러나 나는 고전적인 IE6 부동 소수점 버그가 추가 HTML 없이 CSS만으로 극복될 수 있는지 궁금했고 놀랍게도 가능해 보였습니다. 비결은 IE의 CSS 표현식을 사용하여 페이지의 텍스트 상자 뒤에 <br> 요소를 삽입하는 것입니다.

IE6 및 IE7을 에뮬레이션할 때 IETester에서 다음 코드가 효과적이었습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <style type="text/css">
            #section {border:solid 2px #b7ddf2; background:#ebf4fb; margin-top: 20px; display: block; zoom: 1}
            label{clear: left; float: left; width: 300px; margin-left: 20px; margin-bottom: 10px;}
            input{
                float: left;
                margin-bottom: 10px; 
                *zoom: expression(this.runtimeStyle.zoom="1", 
                    this.parentNode.insertBefore(document.createElement("br"), this.nextSibling).style.cssText="clear:both;font:0/0 serif");
            }
        </style>
    </head>
    <body>
        <div id="section">
            <h2>Section Title</h2>

                <label for="name">Name</label>
                <input type="text" id="name" />


                <label for="dob">Date of Birth</label>
                <input type="text" id="dob" />


                <label for="email">Email</label>
                <input type="text" id="email" />

        </div>
    </body>
</html>

의 정보를 바탕으로이 페이지

관련 정보