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

Question

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

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

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

Answer 1

我正在使用 FF4，但它看起来与您的页面不符。

• 首先，您将“.form-checkboxes”设置为 100 像素宽度，将其更改为更宽或更灵活的东西(否则您的元素总是会包装得很糟糕)
• 您不能使用 width:50% 对齐 3 列中的内容，因为您定义了 .form.item 占用的一半空间，您希望使用 33% ，但我建议做 30% 并添加2% margin-right 在元素之间保持一点间隙

我会做类似的结构

<div class="container clearfix">
   <label for="input1">
     <input type="text" id="input1" />
     <span>my text</span>
   </label>
   <label for="input2">
     <input type="text" id="input2" />
     <span>my text</span>
   </label>
   <label for="input3">
     <input type="text" id="input3" />
     <span>my text</span>
   </label>
</div>

并添加为 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%;
}