一些用户报告说,由于将我对 CSS Sprite 的使用与他们对强制浏览器颜色浏览的偏好相结合,导致使用我的网站时出现问题。该问题在 Firefox 和 IE 中似乎是相同的。是否有一个好的解决方案可以让我支持这些用户?
最佳答案
这里的问题是浏览器的背景颜色设置覆盖了 CSS 为创建 Sprite 而设置的图像。
一些聪明的 CSS 以合理的方式解决了这个问题。首先,我调整了 CSS Sprite 的尺寸,将它们的高度和宽度减少了 2px。然后我添加了一个透明的 1px 边框。因此,当呈现页面时,浏览器会在 CSS Sprite 区域的周边绘制边框。
此外,我在 CSS 中添加了 color:transparent;
以使任何包含的文本透明。然后在我使用 sprite 的每个地方,我添加一小段文本(只需一两个字母;足以表明一些意义,而无需扩展用于 sprite 的元素的位置),再加上一个好的 title= 'blah blah ...'
描述。
原始 CSS:
.sprite1 {
background:url(../images/mySprite.png);
height:18px;
width:18px;
background-position:0px 0px;
}
.sprite1:hover {
background:url(../images/mySprite.png);
height:18px;
width:18px;
background-position:0px -20px;
}
.sprite2 {
background:url(../images/mySprite.png);
height:18px;
width:18px;
background-position:-20px 0px;
}
.sprite2:hover {
background:url(../images/mySprite.png);
height:18px;
width:18px;
background-position:-20px -20px;
}
新 CSS
.sprite1 {
background:url(../images/mySprite.png);
height:16px; //adjusted to account for border
width:16px; //adjusted to account for border
background-position:-1px -1px; //adjusted to account for border
border: 1px solid transparent; //encloses element in a box that will only be seen if browser colors are enforced
color: transparent; //enables including text that will only be seen if browser colors are enforced
filter: alpha(opacity = 0); //make transparency work in IE
}
.sprite1:hover {
background:url(../images/mySprite.png);
height:16px; //adjusted to account for border
width:16px; //adjusted to account for border
background-position:0px -21px; //adjusted to account for border
border: 1px solid transparent; //encloses element in a box that will only be seen if browser colors are enforced
color: transparent; //enables including text that will only be seen if browser colors are enforced
filter: alpha(opacity = 0); //make transparency work in IE
}
.sprite2 {
background:url(../images/mySprite.png);
height:16px; //adjusted to account for border
width:16px; //adjusted to account for border
background-position:-21px -1px; //adjusted to account for border
border: 1px solid transparent; //encloses element in a box that will only be seen if browser colors are enforced
color: transparent; //enables including text that will only be seen if browser colors are enforced
filter: alpha(opacity = 0); //make transparency work in IE
}
.sprite2:hover {
background:url(../images/mySprite.png);
height:16px; //adjusted to account for border
width:16px; //adjusted to account for border
background-position:-21px -21px; //adjusted to account for border
border: 1px solid transparent; //encloses element in a box that will only be seen if browser colors are enforced
color: transparent; //enables including text that will only be seen if browser colors are enforced
filter: alpha(opacity = 0); //make transparency work in IE
}
关于强制执行浏览器颜色的 CSS Sprites,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4998116/