1

親コンテナー全体に 4 つのアイテムを均等に分散しようとしていますが、何らかの理由で ie7 で 4 番目のアイテムが次の行にプッシュされます。各項目に 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% を超えて最後の項目が押し下げられる可能性があります。そのため、25% の代わりに 24% を使用するか、正しいピクセル幅を計算する必要があります。

あまり良くありませんが、コードを次のように変更できます。

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 に答える