强制执行浏览器颜色的 CSS 精灵

Question

一些用户报告了使用我的网站时出现的问题，因为我对 CSS 精灵的使用与他们使用强制浏览器颜色进行浏览的偏好相结合。 Firefox 和 IE 中的问题似乎相同。有没有一个好的解决方案可以让我支持这些用户？

Answer 1

这里的问题是浏览器的背景颜色设置覆盖了 CSS 设置来创建精灵的图像。

一些聪明的 CSS 以合理的方式解决了这个问题。首先，我调整了 CSS 精灵的尺寸，将其高度和宽度减少了 2 像素。然后我添加了一个透明的 1px 边框。因此，当渲染页面时，浏览器会在 CSS 精灵区域的周围绘制边框。

此外，我向 CSS 添加了 color:transparent; 以使任何包含的文本透明。然后，在我使用精灵的每个地方，我都会添加一小段文本（只需一两个字母；足以表明某种意义，而无需扩展用于精灵的元素的位置），再加上一个好的 title= “等等等等...”描述。

原始 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
}