css - 无序列表项背景图像在 Safari 中缩小但在 Chrome 中不缩小

Question

我的问题是，用于在无序列表(“ul”)中列出元素(“li”)的背景图像在不同浏览器中的行为大不相同。我不确定如何最好地解决这个问题。该代码在 Apple-WebKit 浏览器中呈现得很好，但图像在 Chrome 或 Firefox 中无法正确缩小到“li”范围。

我意识到我可以将图像缩放到“正确”的分辨率，但是我必须实现所有用户 ID 2x 交换视网膜和高 DPI 显示器，这确实是一个维护麻烦，因为这个图标网格会定期随着时间的推移而变化。

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>

[等...]

Answer 1

通过使用简写 background 属性，您将覆盖所有先前设置的背景样式。如果您只想更改背景图像，则需要改用背景图像。

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

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

或者，您可以重新定义其他样式。