在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%; 
}