Question

我试图在其父容器中均匀地传播4个项目，但出于某种原因，在ie7中，第四个项目被推到下一行。如果我为每个项目指定25％的宽度，我不明白这是怎么回事。这是我的html / css：

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <style>
        html, body, ul, li { padding:0; margin:0; }
        ul { list-style:none outside none; }
        ul li { float:left; height:40px; width:25%; }
        ul li a { display:block; height:20px; padding-top:20px; text-align:center; }
    </style>
</head>
<body>
    <div style="overflow:hidden">
        <ul>
            <li><a href="a">A</a></li>
            <li><a href="b">B</a></li>
            <li><a href="c">C</a></li>
            <li><a href="d">D</a></li>
        </ul>
    </div>
</body>
</html>

似乎在其他浏览器中工作正常，但不是ie7。

Answer 1

如果您调整浏览器的大小，您可能会发现有时最后一项是您想要的第一行。 accepted answer到How to fix Internet explorer 7 bug when using percentage widths for layout?解释了问题所在。

Answer 2

见this question。当您使用百分比宽度时，IE基本上会向上舍入，因此可能会超过100％，只会碰到最后一个项目。所以要解决这个问题，你应该使用24％而不是25％，或者只是计算正确的px宽度。

这是一个位不太好但是你可以改变你的代码：

CSS

 ul { list-style:none; position:relative; }
 li { position:absolute; top:0; height:40px; width:25%;}
 li.two {left:25%;}
 li.three {left:50%;}
 li.four {left:75%;}

HTML

<div> <!-- removed the overflow:hidden -->
    <ul>
        <li><a href="a">A</a></li>
        <li class="two"><a href="b">B</a></li>
        <li class="three"><a href="c">C</a></li>
        <li class="four"><a href="d">D</a></li>
    </ul>
</div>

适用于IE7和Chrome浏览器

无序列表未在ie7上均匀分开

2 个答案:

CSS

HTML