2

関連付けられた :hover 属性を持つアンカー リンクのリストがあります - 本当に簡単です。CSS は、IE7 および他のすべてのブラウザーでは正常に機能しますが、IE8 では機能しません。

.header-nav ul li a:hover {
     border-bottom: 1px dotted #fff;
}

doctype 宣言を HTML5 から HTML4 strict に変更しようとしましたが、何も変わりませんでした - 何かアイデアはありますか?

ありがとう！

編集: 関連する HTML:

<ul>
    <li><a href="http://www.google.com/">Getting Started</a>
    </li><li><a href="http://www.google.com/">Refill</a>
    </li><li><a href="http://www.google.com/">Status</a>
    </li><li><a href="http://www.google.com/">Services</a>
    </li><li><a href="http://www.google.com/">Conditions</a></li>
</ul>

通常の CSS:

.header-nav ul {
    list-style-type:none;
    margin:0;
    padding-left:25px;
    position: absolute; 
    top: 10px;
    *top: 15px;
    left: 0;        
}

.header-nav ul li {
    display: inline-block;
    zoom: 1; *display: inline;      /* Fix for IE7 */
    padding: 0 40px;
}

.header-nav ul li a {
    text-decoration: none;
    line-height: 23px;
    font-size: 18px;
    position: relative;
    top: 7px;
    *top: 2px;  /* IE7 */
    color: #fff;    
}

繰り返しますが、明確にするために、これはIE7では機能しますが、IE8では機能しません。これは紛らわしい部分です...

4

4 に答える 4

1

この問題は、.header-nav ul li aタグのposition:relativeが原因でした... IE8 がこれを処理できなかった理由がわかりません (そして IE7 も処理できました!)。私の修正は、line-height 属性を大きくするだけで相対位置をシミュレートすることでした (そして、IE7 レンダリングの違いを考慮して *line-height を追加しました)。

この問題が発生した理由について誰かが洞察を持っている場合は、ぜひ聞いてください!

これが、古いバージョンの IE の説明で立ち往生している将来の混乱したフロントエンド開発者に役立つことを願っています...

于 2013-07-30T13:32:54.627 に答える
0

次の行を html ファイルの先頭に追加できます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
于 2015-01-09T16:14:24.130 に答える
0

100% の作業ソリューション以下。

.navigation li ul { opacity: 0; visibility: hidden; filter: alpha(opacity=0); // for ie8 and lower }

.navigation li:hover ul{ opacity: 1 !important; visibility: visible; filter: none !important; }
于 2013-11-28T16:32:27.410 に答える