html - 左右边距 float DIV 中的 IE7 间距问题

Question

我想在 DIV 中创建一些宽度和边距百分比的列，可以适应任何具有动态宽度的容器。

example

<div class="gridFluid">
    <div class="col-1-4"></div>
    <div class="col-1-4"></div>
    <div class="col-1-4"></div>
    <div class="col-1-4"></div>
</div>

---

 * {
     margin: 0;
     padding: 0;
 }
 body {
     font-size: 1%
 }
 .gridFluid {
     width: 960px;
     display: table;
     background: #eee;
     font-size: 0px;
     overflow: auto;
     zoom: 1;
 }
 .col-1-4 {
     background: #ddd;
     height: 200px;
     width: 23%;
     display: table-cell;
     *display: inline;
     zoom:1;
     margin-left: 1%;
     margin-right: 1%;
     float: left;
 }

它在任何地方都按预期工作，但在 IE7 中，最后一列无法在单行中正确显示。可能是因为它在除边距之外的 DIV 之间添加了额外的空间。

我不想为 IE7 使用不同的宽度或边距(宽度:24.5% 而不是 25)。因为这不是一个合适的解决方案。我正在为此寻找一个好的解决方案。

可能是 IE7 的已知问题，我在寻找解决方案时发现了很多与之相关的问题，但没有找到解决问题的适当方法。

Answer 1

让我们根据您的 CSS 进行一些快速计算。

您希望每列占容器宽度的 23%。所以每一列应该是:

.23 * 960 = 220.8

因此每列应为 220.8 像素。

您希望边距各为 1%。

.01 * 960 = 9.6

因此每个边距应为 9.6 像素宽。

等一下。我们在那里有一些部分像素。您如何处理 0.8 或 0.6 像素？那么你必须做一些四舍五入。但是你用哪种方式四舍五入……向上还是向下？好吧，如果你四舍五入，你最终会得到 4 列，大小为 221 像素。

221 * 4 = 884

因此列的总宽度估计为 884 像素。

边距呢？

8 * 10 = 80

因此边距的总宽度估计为 80 像素。

现在让我们将这些数字加在一起。

80 + 884 = 964

嗯...看起来我们这里有 4 个额外的像素...最好将内容向下推到一行以适合 960 像素宽的框。

这就是您的专栏被下推的原因。 另外，请查看:http://ejohn.org/blog/sub-pixel-problems-in-css/