0

私の問題は、順序付けられていないリスト (「ul」) 内のリスト アイテム (「li」) の背景画像が、ブラウザー間で大きく異なる動作をすることです。問題への最善のアプローチ方法がわかりません。このコードは Apple-WebKit ブラウザーでは適切にレンダリングされますが、Chrome または Firefox では画像が "li" 境界まで適切に縮小されません。

画像を「正しい」解像度にスケーリングできることはわかっていますが、Retina ディスプレイと高 DPI ディスプレイ用にユーザー ID 2x スワッピングをすべて実装する必要があります。 .

CSS は id ワイルドカードと同じように構造化されています。これは、最終的に「li」ごとに異なる特性を持つことになるためです。この例のスタイルは、ページのヘッダーにインラインでコーディングされています。

おそらく「li」内またはその周囲でdivを定義するなど、シンプルでエレガントなものが欠けていることを望んでいますが、交絡するほど複雑な結果ですでにそれを試した可能性があると思います。

アドバイスありがとうございました。

例のページは次のとおりです。

https://dl.dropboxusercontent.com/u/35370696/iframes/FrontGrid.html

スタイルの抜粋:

ul[id="GridBox"] 
{
position:relative;
list-style: none;
margin-left:auto;
margin-right:auto;
width: 940px;
height: 370px;  

   }


li[id^="Cell"]
{
color: #FFFFFF;
float:left;
background-color:green;
position:relative;
max-height:70px;
max-width:70px;
height:70px;
width:70px;
background-size:70px 70px;
margin-top: 12px;
margin-left: 12px;
margin-bottom: 12px;
margin-right: 12px;
line-height: 20px;
display: block;
font-family: abel, sans-serif;
font-size: 10px;
font-weight: 400;
text-align:right;
box-shadow: 3px 3px 3px #888888;
}




li[id="Cell1"]


{
background: url(images/Sears.png);

}

li[id="Cell1"]:hover    
{
background: url(images/SearsReverse.png);
color: black;
}

li[id="Cell1"]:active
{
box-shadow: 3px 3px 3px transparent;
color:#7BB1FF;


}

内容の抜粋: 

    <ul class="Icons" id="GridBox">
<a href="http://www.diacritica.pe">     
            <li id="Cell1">ALWB  </li></a>
            <li id="Cell2">ALWB  </li>
            <li id="Cell3">ALWB  </li>
            <li id="Cell4">ALWB  </li>
            <li id="Cell5">ALWB  </li>
            <li id="Cell6">ALWB  </li>
            <li id="Cell7">ALWB  </li>
            <li id="Cell8">ALWB  </li>

[等…]

4

1 に答える 1

1

省略形のbackgroundプロパティを使用すると、以前に設定した背景スタイルがすべて上書きされます。背景画像のみを変更したい場合は、代わりに background-image を使用することをお勧めします。

li[id="Cell1"] {
    background-image: url(images/Sears.png);
}

li[id="Cell1"]:hover  {
    background-image: url(images/SearsReverse.png);
    color: black;
}

または、他のスタイルを再定義することもできます。

于 2013-08-27T18:20:46.957 に答える