与HTML问题形成

Question

我的形式，IE7和IE8但Firefox罚款的意见并不正确显示形式：问题是，它不显示在我的“mainContent1”

形式注意我下面的代码：

<div id="mainContent1"> 
<form action="forms.php" target="_self"> 
<fieldset> 
<legend>Postal Address</legend> 
<label for="street">Street address:</label> 
<input id="street" name="street" type="text" /> 
<label for=" suburb">County</label> 
<input id="county" name="county" type="text" /> 
<label for="state">State</label> 
<input id="state" name="state" type="text" /> 
<label for="zip">Zip Code</label> 
<input id="zip" name="zip" type="text" /> 
</fieldset> 
</form> 
</div> 


fieldset {  
float: left;  
clear: both;  
width: 100%;  
margin: 0 0 -1em 0;  
padding: 0 0 1em 0;  
border-style: none;  
border-top: 1px solid #BFBAB0;  
background-color: #F2EFE9;  
} 

legend { 
margin-left: 1em; 
color: #000000; 
font-weight: bold; 
} 

fieldset ol { 
padding: 1em 1em 0 1em; 
list-style: none; 
} 

fieldset li { 
padding-bottom: 1em; 
} 

fieldset.submit { 
border-style: none; 
} 

label em {   
display: block;   
color: #060;   
font-size: 85%;   
font-style: normal;   
text-transform: uppercase;  
} 

Answer 1

尝试把结算DIV底部，里面的＃mainContent1 ...

<div id="mainContent1"> 
<form action="forms.php" target="_self"> 
<fieldset> 
<legend>Postal Address</legend> 
<label for="street">Street address:</label> 
<input id="street" name="street" type="text" /> 
<label for=" suburb">County</label> 
<input id="county" name="county" type="text" /> 
<label for="state">State</label> 
<input id="state" name="state" type="text" /> 
<label for="zip">Zip Code</label> 
<input id="zip" name="zip" type="text" /> 
</fieldset> 
</form> 
<div style="clear:both"></div> 
</div> 

Answer 2

不要使用清除分区，使用“.clearfix”清除方法更清洁。

.clearfix:after{content:".";display:block;clear:both;height:0;visibility:hidden} 

然而，对于IE则需要添加到您的IE的CSS文件：

.clearfix{zoom:1} 

然后你只需将类添加到容器元素，以正确地清除浮动。

<div id="mainContent1" class="clearfix"> 
<form action="forms.php" target="_self"> 
<fieldset> 
<legend>Postal Address</legend> 
<label for="street">Street address:</label> 
<input id="street" name="street" type="text" /> 
<label for=" suburb">County</label> 
<input id="county" name="county" type="text" /> 
<label for="state">State</label> 
<input id="state" name="state" type="text" /> 
<label for="zip">Zip Code</label> 
<input id="zip" name="zip" type="text" /> 
</fieldset> 
</form> 
</div> 

这消除了您的HTML中额外的空元素的需要。