如何解决 IE CSS 百分比舍入问题？

Question

我正在尝试创建一个动态网站，其中三个浮动框彼此相邻。 它们的宽度各为 33.33%。 它们周围的容器 div 的宽度为 75%。

我在这里找到了一篇关于该问题的文章： CSS：跳列
我还在这里找到了相同问题的示例： 跳栏示例

拖动窗口大小即可在 IE7 或更早版本中查看跳转情况。

有人知道是否可以解决这个问题吗？ （没有 JavaScript）

Answer 1

我根据情况使用两种不同的解决方案。 首先，尝试 Nicole Sullivan 方法（在行中的最后一个元素上使用 overflow:hidden; 而不是 float/width）：

http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/< /a>

.container {
  width: 75%;
}

.box1 {
  width: 33.33%;
  float: left;
  display: inline; /* fixes another IE bug */
}

.box2 {
  overflow: hidden;
}

这在大多数情况下都有效。

如果做不到这一点，我会向最后一个元素添加几个像素的负边距。

.box2 {
  width: 33.33%;
  float: left;
  display: inline; /* fixes another IE bug */
  margin-right: -3px;
}

如果最后一个元素向右浮动，只需在左侧添加负边距即可。 到目前为止，这在少数不适合溢出的情况下对我有用。

Answer 2

在这种情况下，我倾向于使用仅适用于 IE 的样式表来解决问题，该样式表会捏造值直到它们起作用。 在本例中，只需将宽度设置为 33%，这并不完美，但这就是网络的本质。

Answer 3

我认为一个简单的答案可能是根本不舍入，只需创建一个宽度为 1% 的最终“间隔”元素，该元素共享 1/3 元素的外观。 即使 IE 也应该能够处理 33 + 33 + 33 + 1 舍入。

Answer 4

我有同样的问题。 ie7 没有正确渲染 33.33%。 33% 的人会这么做，但结果却相差甚远。 我使用了上面第一个响应中第二个代码块的建议，再加上一点 ie hack。 它对我有用，我希望它有帮助。

.all-boxes {
   width: 33.33%;
   float: left;
   display: inline;
   *margin-right: -1px; /* Add the asterisk */
 }

边距值可能需要根据您的实现进行更改，但 1px 对我有用。