强制执行浏览器颜色的 CSS Sprites

Question

一些用户报告说，由于将我对 CSS Sprite 的使用与他们对强制浏览器颜色浏览的偏好相结合，导致使用我的网站时出现问题。该问题在 Firefox 和 IE 中似乎是相同的。是否有一个好的解决方案可以让我支持这些用户？

Answer 1

这里的问题是浏览器的背景颜色设置覆盖了 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
}