2

最初に答えを探してみましたが、これはエッジケースのようです。

JavaScriptを介してリンクにクラスを追加しています（実際にはjQueryですが、この場合は問題ではないと思います）。このクラスは、背景画像としてアイコンを追加し、パディングを追加します。パディングと背景画像が特定のリンクで表示されない。この問題は IE8 で発生しますが、驚くことに IE7 でも問題なく動作します。IE9/10 をテストできません。Firefox では問題なく動作します。

コードを最小限に減らし、問題を説明する jsFiddle を作成しました。 http://jsfiddle.net/toxalot/fsdcu/

ここにコードを追加してみます。

<style type="text/css">
body { background-color: #fff }
a:hover { background-color: transparent; color: #c30 }
ul { padding-left: 40px }
.iconNewWindowLeave { padding-right: 15px; background-color: #ccc }
</style>
<ul>
    <li style="float: left"><a class="iconNewWindowLeave" href="#">left link</a></li>
    <li style="text-align: right">some stuff on the right</li>
</ul>
<ul>
    <li style="float: left"><a class="linkExternal" href="#">left link</a></li>
    <li style="text-align: right">some stuff on the right</li>
</ul>
<script type="text/javascript">
$('.linkExternal').each(function() {
    $(this).addClass('iconNewWindowLeave');
});
</script>

例から画像を削除し、説明のために背景色を追加しました。IE 8 では、2 番目のリンクに右側のパディングがありません。リンクにカーソルを合わせると、パディングが追加されます。a:hover CSS を削除しても、ホバリングしても問題は解決しません。フロートを外すと、問題はなくなります。他の CSS を削除すると、問題は解決します。

ということで原因を絞り込みましたが、どうすればいいのかわかりません。既存のコードを削除または変更したくありません。サイトのレイアウトにはすべて必要です。可能であれば、 CSS や JavaScript を追加して修正したいと考えています。それは些細な問題ですが、私を悩ませています。また、IE の新しいバージョンで問題が発生するかどうかについても興味があります。

4

2 に答える 2

1

追加してみてください: adisplay:inline-block;またはdisplay:block;.iconNewWindowLeave

.iconNewWindowLeave { padding-right: 15px; background-color: #ccc; display:inline-block; }

（未検証）

于 2012-11-29T10:27:18.900 に答える
0

ページ上にいくつかのフローティング コンテナーがある場合は常に、親コンテナーをクリアします。あなたの場合、スタイル clear:left を ul に追加します。それはうまくいくはずです。

また、アプリケーション全体で多数のフロートを使用している場合は、親コンテナーに clearfix クラスを追加することをお勧めします。

于 2012-11-29T10:38:41.657 に答える