如何解决IE CSS百分比舍入问题？ [英] How do I get around the IE CSS percentage rounding problem?

问题描述

我正在尝试创建一个动态网站，其中有三个浮动框旁边的eachother。它们的宽度为33.33％。围绕它们的容器div宽度为75％。

I'm trying to create a dynamic site where I have three floating boxes next to eachother. They are 33.33% in width each. The container div around them is 75% in width.

我发现了一个关于这个问题的文章： CSS：跳跃列

我还发现了一个例子同样的问题：跳跃列示例

I've found an article about the problem here: CSS: Jumping columns
I've also found an example of the same problem here: Jumping columns example

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

Drag the window size to see the jumping in IE7 or earlier.

任何人都知道是否可能绕过这个？ （没有Javascript）

Anyone knows if it's possible to get around this? (without Javascript)

推荐答案

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

I use two different solutions depending on the situation. First, try the Nicole Sullivan approach (using overflow: hidden; on the final element in a row instead of 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;
}

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

This works in most cases.

如果没有，我会为最后一个元素添加一个负像素数。

Failing that, I add a negative margin of several pixels to the last element instead.

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

如果最后一个元素是浮动的，剩下。到目前为止，在 overflow 不适合的少数情况下，这对我有用。

If that last element is floated right instead, just add the negative margin to the left. So far that has worked for me in the few cases where overflow didn't fit.

这篇关于如何解决IE CSS百分比舍入问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！