0

以下のコードをtest.htmlに貼り付けてfirefoxで閲覧すればOKです。<a>しかし、IE でブラウズすると、要素の右側により多くのスペースがあることがわかります。

<style>
li { 
    display:inline;
    margin:0 90px;
    padding:6px 12px;
    background:#777777 none repeat scroll 0 0;
}



li a {
    color:#FFFFFF;
    text-decoration:none;
    font-weight:bold;
}
</style>


<div id="tabs">
    <div class="nav">
        <ul>
            <li><a href="test">test</a></li>
            <li><a href="test">test</a></li>
            <li><a href="test">test</a></li>
            <li><a href="test">test</a></li>
            <li><a href="test">test</a></li>
        </ul>
    </div>
</div>

編集:IEでもテキストを作成するには?

4

4 に答える 4

0

私はあなたの情報源を見て、自分で試してみました。

Firefox3.0.11とInternetExplorer8では、ほとんど同じページを表示していました。

私が言えることの1つは、ブラウザの幅が異なるため、最初はページが異なって見えたということですが、マージンの問題はありませんでした。私の場合、ブラウザのサイズ変更は機能しました。

しかし、あなたが抱えている問題はよくあることです。Internet Explorerは、ほとんどの場合、通常の標準準拠のブラウザとは異なるページを表示します。人々がこれを回避することを発見した1つの方法（そしてこれはあなたの問題を非常にうまく解決するかもしれません）はCSSリセットシートを使用することです。

いくつかの良いものは次のとおりです。

于 2009-06-24T20:01:13.307 に答える
0

問題は、CSSボックスモデルがパディングについて何をするかを決定する場所に関して、ブラウザ間で不幸な意見の相違があることです。

  • パディングを増やすと、IEはdiv内のコンテンツのスペースを減らすため、divのサイズを同じに保つ
  • Firefoxは、コンテンツサイズを同じに保ちながら、パディングでdivサイズを増やします。
于 2009-06-24T20:01:47.470 に答える
0

IE6 でテストしたところ、アンカー タグに余分なスペースが追加されたようです。コピーして貼り付けると、自分で確認できます。Firefox は余分なスペースを追加しません。

必要に応じて、IE のマージンを変更できます。これは完全な解決策ではありませんが、タブを似たものにするのに役立つ場合があります。すべてのブラウザで同一にする必要がある場合は、代わりにいつでも画像を使用できます。しかし、これを試してください：

li a {
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
}

*html li a {
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
margin-right:-3px;
}

*+html li a {
color:#FFFFFF;
text-decoration:none;
font-weight:bold;
margin-right:-3px;
}
于 2009-06-24T20:14:04.793 に答える
0

質問に簡単に答えるには、すべてのli要素を 1 行に配置するか、フロートします。

于 2009-06-24T20:18:20.590 に答える