如何解决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;
}

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

相关文章

Css3如何实现鼠标移上变长特效?(图文+视频)
css3怎么实现鼠标悬停图片时缓慢变大效果?(图文+视频)
jquery如何实现点击网页回到顶部效果?(图文+视频)
css3边框阴影效果怎么做?(图文+视频)
css怎么实现圆角边框和圆形效果?(图文+视频教程)
Css3如何实现旋转移动动画特效