2

私のリンクはここにあります：

サンプルページ

私は list-style-image: を使用して、水平方向のリスト (一番上と一番下) の区切り文字を指定しています。各リストの最初の li から画像を削除する .first のクラスがあります。

見よ、IE6 では動かない。箇条書きの画像が表示されず、テキストの下の数ピクセルがトリミングされているように見えます。

スクリーンショット

このページの 'haslayout' バグをいくつか修正しましたが、ルール階層に何か関係があるような気がしますが、ハッキングしてもうまくいかないようです。

おそらく誰かがこれに光を当てることができますか？ありがとう。

また、私の色の変更はホバーでは機能しますが、同じセレクターで下線では機能しませんか?

編集OK、yoavfが提案する背景画像手法を使用しましたが、これでうまくいくようですが、トリミングの問題はまだ残っています。それから別の問題のように見えます...

ここに私の改訂されたCSSがあります

#site-navigation li {
    background-image:url(../img/site-nav-seperator.gif);
    background-position:0 4px;
    background-repeat:no-repeat;
    float:left;
    padding-left:15px;
}
#site-navigation li.first {
    background-image:none;

}

さらに編集：

タグに行の高さを与えることで、トリミングも修正できました。

#site-navigation a {
    color:#666666;
    display: block;
    text-decoration:none;
    margin-right: 1em;
    line-height: 1.1em;
}

しかし、これは少しボッジのように感じます:)

4

2 に答える 2

3

これが実際の解決策ではないことはわかっていますが、 list-style imageの代わりにbackground-imageを使用することをお勧めします。同じ効果が得られ、すべてのブラウザーで機能します。

于 2008-11-03T14:45:45.863 に答える
1

サイト ナビゲーション内のオブジェクトのマージンとパディングに問題があるようです。

これらの要素の CSS を表示していただければ、より迅速に確認できます :)

于 2008-11-03T14:49:49.100 に答える