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

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.

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

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

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

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

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

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

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

4 个解决方案

#1

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):

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

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

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.

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

#2

In a situation like this, I would tend to get round the problem using an IE-only stylesheet that fudges the values until they work. In this case, just set the widths to 33%, it won't be perfect but then that's just the nature of the web.

在这样的情况下,我倾向于使用仅限IE的样式表来解决问题,这些样式表可以篡改值,直到它们工作。在这种情况下,只需将宽度设置为33%,它将不是完美的,但那只是网络的本质。

#3

I think that a simple answer might be to not round at all, just create a final "spacer" element with a 1% width that shares the look of the 1/3rd elements. Even IE should be able to deal with a 33 + 33 + 33 + 1 rounding.

我认为一个简单的答案可能是根本不圆,只需创建一个宽度为1%的最终“spacer”元素,它共享1/3元素的外观。即使IE应该能够处理33 + 33 + 33 + 1舍入。

#4

I had the same problem. ie7 did not render 33.33% correctly. It would work with 33% but then it was a hairline off. I used the advice from the second block of code in the first response above, plus a little ie hack. It worked for me, I hope it helps.

我有同样的问题。 ie7没有正确地呈现33.33%。它可以使用33%,但后来它是一个发际线。我在上面的第一个响应中使用了第二个代码块的建议,加上一点即黑客。它对我有用,我希望它有所帮助。

.all-boxes {
   width: 33.33%;
   float: left;
   display: inline;
   *margin-right: -1px; /* Add the asterisk */
 }

The margin value might need to change based on your implementation, but 1px worked for me.

保证金价值可能需要根据您的实施情况进行更改,但1px对我有用。

#1