无序列表项背景图像在 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 属性，您将覆盖所有之前设置的背景样式。如果您只想更改背景图片，则需要使用 background-image。

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

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

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