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

Question

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

我在这里找到了一篇关于该问题的文章:CSS: Jumping columns
我还在此处找到了相同问题的示例:Jumping columns example

在 IE7 或更早版本中拖动窗口大小以查看跳跃。

有人知道是否可以解决这个问题吗？ (没有 Javascript)

Answer 1

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

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

.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;
}

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