0

水平メニューをきれいに見せようとしています。
これは、私の HTML がどのように見えるかの例です。

<div id="menu">
<ul>
    <li><a class="selected" href="index.html">Home</a></li>
    <li><a href="bio.html">Bio</a></li>
    <li><a href="labs.html">Labs</a></li>
    <li><a href="assignments.html">Assignments</a></li>
</ul>
</div>

これは私の CSS のスニペットです。Firefox では機能しますが、IE では機能しません。

#menu {
margin:auto;
padding-top: 4px;
width: 800px;
}

#menu ul
{
float:left;
list-style-type:none;
margin:0;
padding:0;
padding-top:7px;
padding-left:20px;
}    

#menu li
{
font: 87.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
display:inline-block;
}

#menu a, #menu a.selected
{
text-decoration:none;
color:#000;
background-color:#fff;
background-image:url('../images/menu-unselected.jpg');
background-repeat:repeat-x;
padding-top:4px;
padding-bottom:0px;
padding-left:12px;
padding-right:12px;
border:solid;
border-width: 1px 1px 1px 1px;
border-color:#000;
}

#menu a.selected
{
padding-top:7px;
padding-bottom:1px;
border-width: 1px 1px 0px 1px;
}

#menu a:hover, #menu a.selected
{
background-image:url('');
}

css を変更して IE で正しく動作させることはできますが、FireFox では動作しません! 各ブラウザでレンダリングされた上記のコードのスクリーンショットを次に示します。

ファイアフォックス：こちら

Internet Explorer：こちら

4

3 に答える 3

0

に変更display: inline-block;し display: inline;ますli。

次に、に追加display: block; float: left;しますa。

a次に、タグ ( text-align、など) を使用してタブのスタイルを変更しますwidth。

于 2011-10-13T17:46:04.683 に答える
0

これは私にとってはうまくいきました。

#menu li ではなく、display:inline; float:left; に置き換えます。

次に #menu a.selected でパディングとマージンを使用して、他のものよりも高く再配置します。追加した：

padding-bottom:4px;
padding-top:7px;
margin-top:5px;

表示ブロック; #menu a ではオプションのようです。私は FF 7.0.1 の Mac を使用していますが、正しく見えます。IEでは見られません。それが役立つことを願っています。

于 2011-10-12T21:01:48.947 に答える
0

display:inline-block;可能な場合は代わりに使用する傾向がありfloat:left;、クロスブラウザーで問題が発生したことはありません。だから私があなたに提案するのは、を使うこと#menu li{ display:inline-block;}です。

明らかに、すべての変更はデフォルトのレイアウトに関連しています...ラッパー、ページ、ボディ、htmlなど..

于 2011-10-13T02:35:38.813 に答える