1

我试图将 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。

4

2 回答 2

0

如果您调整浏览器的大小，您可能会发现有时最后一项在您想要的第一行。使用百分比宽度进行布局时如何修复 Internet Explorer 7 错误的公认答案？解释了问题所在。

于 2012-04-10T12:38:47.080 回答
0

看到这个问题。基本上，当您使用百分比宽度时，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 中对我有用

于 2012-04-10T12:39:19.067 回答