ie7多个浮动div，其百分比宽度等于容器div内的100％

Question

This seems to works in ie8, Chrome, and Firefox. Everything should be on the same line, but in ie7 the last div for some reason doesn't seem to "fit" and gets dropped down to the next line. Is there a simple way to get this to work with ie7?

<div style="width: 95%">

    <div style="width: 25%; background-color: blue; float: left;">test1</div>

    <div style="width: 25%;  background-color: green;float: left;">test2</div>

    <div style="width: 25%;  background-color: red;float: left;">test3</div>

    <div style="width: 25%;  background-color: yellow;float: left;">test4</div>

</div>

Answer 1

你可能不得不将它们设置为24.9％，因为IE的组合百分比宽度为100％。

Answer 2

You should just set clear:right; for all your floating div elements. It'll works fine for IE.

Answer 3

It's simple math!

If your <div style="width: 95%"> is generating a 100px element, each childelement of 25% will result in elements of 25px.

However, if your <div style="width: 95%"> is generating a 150px element, each childelement will be 37.5px

IE will then round this value up to 38px (because you can't have half a pixel). You will then end up with 4 elements of 38px = 152px

Hope this helps...