1

色見本の水平方向のリストがあり、各リスト項目には次のマークアップがあります。

<li class="ws-filter">
    <a class="ws-swatch-link" title="Black" href="#">
        <div title="Black" class="ws-filter-swatch" style="background-color: #000000;"></div>
    </a>
</li>

ただし、選択した色見本には次のマークアップがあります (アンカー タグはありません)。

<li class="ws-filter ws-selected">
    <div title="Silver" class="ws-filter-swatch" style="background-color: #c0c0c0;"></div> 
</li>

CSSは次のとおりです。

.ws-filter-list .ws-filter {
    display: inline-block;
}

.ws-filter-swatch {
    width: 20px;
    height: 20px;
    border: 1px solid #dcdcdc;
    margin: 2px;
}

そして、ここに JSFiddle があります: http://jsfiddle.net/nHk27/2/

これはほとんどのブラウザーで問題なく動作し、次のようになります。

ここに画像の説明を入力

ただし、IE8 では、選択したスウォッチが次のように外れて表示されます。

ここに画像の説明を入力

これは私が取り組んでいるプロジェクトであり、マークアップを変更することはできません。div、アンカー、リスト項目の表示をさまざまな組み合わせで変更して実験してみました。フロートを使用して動作させることができると確信していますが、フロートを使用せずにこれを修正する方法はありますか?

4

2 に答える 2

0

関連する CSS を投稿していないため、IE ハック手法を使用して IE8 をターゲットにすることをお勧めします。次のようなことを試してください。

.ws-filter div[title="Silver"] {
    margin-top: 20px\0/ /* or margin-bottom: -20px. The value here can changed based on your context */
}
于 2014-01-25T19:04:19.350 に答える