2

私は初心者の質問のように思われるものを持っていますが、私の光のためにこれを理解することはできません. LiタグがIE8で幅をレンダリングしない理由を理解するために、別の目が本当に必要です。

chrome や firefox などの他のブラウザーはスタイルを適切にレンダリングしますが、IE8 は連携を拒否し、各 li の幅を 108px に設定することを拒否します。

HTMLは次のとおりです。

<div id="navigation">
<ul>
    <li><a href="">HOME</a></li>
    <li><a href="">SERVICES</a></li>
    <li class="current_tab"><a href="">COMPANY</a></li>
    <li><a href="">EMPLOYEE</a></li>
    <li><a href="">WORK TOOLS</a></li>
    <li><a href="">CONTACT</a></li>
</ul>

そして、その nav と親タグの CSS は次のとおりです。

body, html {
    overflow: auto;
    position: relative;
}

h3 {
    margin-bottom: 10px;
}

#employee_dir {
    margin-bottom: 20px;
}

#lotus {
    padding-top: 20px;
}

#content {
    margin-top: 10px;
}

#navigation li{
    background-color: transparent;
    background: url('../img/off-tab.png') no-repeat;
    padding-top: 0px !important;
    width: 108px !important;
    padding: 0px;
}

.current_tab {
    background-color: transparent;
    background: url('../img/on-tab.png') no-repeat !important;
    width: 108px;
    height: 33px !important;
}

#navigation a {
    text-align: center;
}

また、私が最後に見たもののスクリーンショットをいくつか添付しています。

これは、ブラウザーに組み込まれている開発ツールを使用して css を表示する IE8 です。 ただし、これは li タグに対してレンダリングされるものです これは、ナビがIE8でどのようにレンダリングされるかです ただし、これはクロムでレンダリングする方法です

4

1 に答える 1

3

!important宣言を使用しないで、代わりに次のように作成<li>してみてくださいinline-block

#navigation li{
    background-color: transparent;
    background: url('../img/off-tab.png') no-repeat;
    padding-top: 0px !important;   <------ Why padding here?
    width: 108px;
    padding: 0px;   <-------Your padding-top gets re-setted here
    display: inline-block;  <------- Here
}
于 2012-11-04T07:53:38.380 に答える