在IE7中，CSS宽度以百分比显示不正确

Question

我试图将下一页上的复选框对齐成3列。这个页面有几个不同的版本，每个版本可能有更多或更少的复选框。这些框在Firefox和其他浏览器中完美对齐，但不在IE7中。我使用的CSS包含在下面。有人可以帮我找出一个修复IE7？我使用Drupal的Better Exposed Filters来生成文本框。

http://www.zambux.com/coupons/services

.bef-select-as-checkboxes .form-item { 
    width: 50%; 
    float: left; 
} 

Answer 1

我使用FF4，它看起来不正确的页面。

• 首先，你有“.FORM-复选框”为100px的widh，改变的东西宽或更灵活（否则永远是你的元素将包装不好）
• 您无法使用对齐3列的东西宽度：50％，因为您定义的是.form.item占用的空间半角，所以您希望使用33％，但我建议做30％并添加2％的空白边距 - 以保持一点距离元素

我会做这样的事情作为结构

之间

，并添加为CSS

#container label{width:30%; margin-right:2%; float:left;} 
.clearfix:after { /*This is for clearing your floating elements*/ 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

.clearfix { 
    display: inline-block; 
} 

html[xmlns] .clearfix { 
    display: block; 
} 

* html .clearfix { 
    height: 1%; 
}