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

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

我在这里找到了一篇关于这个问题的文章：CSS: Jumping columns
我在这里也找到了同样问题的一个例子：Jumping columns example

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

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

解决方法

我根据具体情况使用两种不同的解决方案.首先,尝试使用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;
}

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

原文地址：https://www.jb51.cc/css/214808.html