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;
}

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

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

1 个答案: