2

CSS メニューに取り組んできましたが、Internet Explorer 以外のすべてのブラウザーで正常に動作します。

問題は次のとおりです。最初の<li>要素が正しく配置されていません。実際、押し倒されている。

#sub-navigation {
    background: url("{T_THEME_PATH}/images/subnavigation.png") repeat-x;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
    height: 25px;
    line-height: 25px;
    border-bottom: 1px solid #dfeaf1;
    border-left: 1px solid #dfeaf1;
    border-right: 1px solid #dfeaf1;
    border-top: 3px solid #ffffff;
}
#second-navigation li {
    border-right: 1px solid #cddfeb;
    padding-right: 14px;
    padding-left: 14px;
    margin-left: 0px;
    float: left;
    display: block;
    font-size: 11px;
    font-weight: none;
    font-color: #6b6b6b;
}

#second-navigation ul {
    position: absolute; 
    display: none;
    z-index: 999;
    background: #4e4e4e;
    border: none;
    border-radius: 2px;
    width: 80px;
    color: #FFFFFF;
}
<div id="sub-navigation">
        <ul id="second-navigation" class="leftside">
            <li>
                <a href="" title="Calendar"><center>Calendar</center>   </a>
            </li>
            <li>
                <a href="" title="HH Converter">HH Converter</a>
            </li>
            <li>
                <a href="" title="Poker Bonuses">Poker Bonuses</a>
            </li>
    </div>

誰でもこれを修正する方法を知っているので、Internet Explorer で動作します。

4

1 に答える 1

0

残念ながら、現時点では実際のコードをテストすることはできません。テストステーションは移動中です。経験と私の頭の上から - いくつかのエラーがあります。

コード：

#sub-navigation {
    background: url("{T_THEME_PATH}/images/subnavigation.png") repeat-x;
    -webkit-border-radius: 1px;
    -moz-border-radius: 1px;
    border-radius: 1px;
    height: 25px;
    line-height: 25px;
    border-bottom: 1px solid #dfeaf1;
    border-left: 1px solid #dfeaf1;
    border-right: 1px solid #dfeaf1;
    border-top: 3px solid #ffffff;
}
#second-navigation ul {
    position: absolute; 
    display: none;
    z-index: 999;
    background: #4e4e4e;
    border: none;
    border-radius: 2px;
    width: 80px;
    color: #FFFFFF;
    list-style:none;
}
#second-navigation li {
    border-right: 1px solid #cddfeb;
    padding-right: 14px;
    padding-left: 14px;
    margin-left: 0px;
    float: left;
    display: inline-block;
    font-size: 11px;
    font-weight: none;
    font-color: #6b6b6b;
    list-style-type:none;
}
#second-navigation li a {
    display:block;
}
#second-navigation .center {
    text-align:center;
}
<div id="sub-navigation">
        <ul id="second-navigation" class="leftside">
            <li>
                <a href="#" title="Calendar" class="center">Calendar</a>
            </li>
            <li>
                <a href="#" title="HH Converter">HH Converter</a>
            </li>
            <li>
                <a href="#" title="Poker Bonuses">Poker Bonuses</a>
            </li>
        </ul>
    </div>

変更点は次のとおりです。

  • どこかにリセットがない限り (YUI リセットなど)、ul と li には list-style: none; を含める必要があります。および list-style-type:none;
  • Internet Explorer では、float:left; display:inline-block; を伴う必要があります。表示しない:ブロック;
  • ほとんどのブラウザーでは、ap 内の要素とタグが機能します... IE
    は通常、ヒッシーな適合をスローします。CSS を使用して、テキストの中央揃えを宣言します...とにかくこれを行う必要があります。

うまくいけば、これは役に立ちます！

余談ですが、CSSに関して...リンクを中央に配置したい場合は、すべてのパディングとマージンの書き込みを取り除きます...ブラウザーはパディングとマージンを異なる方法で考慮し、問題を引き起こしている可能性があります。

シンプルな：

a {
display:block;
line-height: 25px;
text-align:center;
}

トリックを行います。

于 2012-07-13T18:36:24.277 に答える