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

Question

我正在尝试创建一个动态网站,我在旁边有三个浮动框.它们的宽度分别为33.33%.它们周围的容器div宽度为75%.

我在这里找到了一篇关于这个问题的文章:CSS:跳跃列
我在这里也找到了一个相同问题的例子:跳跃列示例

拖动窗口大小以查看IE7或更早版本中的跳转.

任何人都知道是否有可能解决这个问题？(没有Javascript)

Answer 1

我根据具体情况使用两种不同的解决方案.首先,尝试使用Nicole Sullivan方法(overflow: hidden;连续使用最后一个元素而不是浮点数/宽度):

.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不适合的情况下,这对我有用.

Answer 2

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