IE float no padding 버그

Question

HTML 폼을 만들려고합니다. 왼쪽에 레이블을두고 부동 한 입력을합니다. 이제 FF로 잘 작동하고 IE8에서도 작동하지만, IE7로 갈 때, 줄 바꿈이 완전히 사라지는 것처럼 보입니다. 요소 사이에 공간이 없습니다. 어떻게 될 수 있습니까?

어떻게 해결할 수 있습니까?

   <p> 
        <span class='left'><label for='gender'>Gender: </label></span> 
        <span class='right'><select name='gender' id='gender'> 
        <option>Select one</option> 
        <option>Male</option> 
        <option>Female</option> 
        </select> 
        </span> 
       </p> 
       <br /> 
       <p> 
        <span class='left'><label for='name'>Name: </label></span> 
        <span class='right'><input name='name' id='name' /></span> 
       </p> 
       <br /> 

이제 휴식을 사용하고 있는데도 어떤 이유로 나는 IE7의 단락 사이에 공백이 없습니다.

고지.

Answer 1

어떤 코드가 위 코드를 래핑하고 있습니까? 양호하게는 CSS 클래스와의 <br/> 태그에 clear: both;을 설정하십시오 :

.clear { clear:both; } 

<br class="clear" /> 

Answer 2

은 두 번째 단락은 첫 번째는 여전히 떠 시작할 때. 휴식 시간을 갖기 위해서는 clear:both; 또는 clear:right;이 필요합니다.

.clearer { clear: both; } 

<p class="right">hi</p> 
<div class="clearer"></div> 
<br /> 
<p>hi</p> 

Answer 3

귀하의 P 태그는 따라서 더 높이

당신의 페이지 태그 플로트 라벨과 떴다 입력 만의 내용이없는 콘텐츠를 떠있다, 그래서 그들은 제로의 높이로 간주됩니다 IE. <p>에 명시적인 높이를 기꺼이 설정하거나 부동 요소를 추가하지 않는 경우 브라우저에 대한 교차 수정을 찾을 수 없습니다.

<br>을 건너 뛰고 여백을 사용하는 것이 좋습니다. 예를 들어, 귀하가 언급 한 <div>의 줄을 가정합니다.

CSS :

.left { float: left; } 
.right { float: right; } 
.wrap p { clear: both; height: 1em; margin: 0 0 1em 0; padding: 0; } 
.wrap br { display: none; } 

HTML :

<form> 
<div class="wrap"> 

<p> 
    <span class='left'><label for='gender'>Gender: </label></span> 
    <span class='right'> 
    <select name='gender' id='gender'> 
    <option>Select one</option> 
    <option>Male</option> 
    <option>Female</option> 
    </select> 
    </span> 
</p> 
<br /> 
<p> 
    <span class='left'><label for='name'>Name: </label></span> 
    <span class='right'><input name='name' id='name' /></span> 
</p> 
<br /> 

</div> 
</form>