Question

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

Answer 1

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

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

此外，我在CSS中添加了color:transparent;以使任何包含的文本透明。然后每个地方我都使用精灵，我添加了一小段文字（只是一两个字母;足以表示一些意义而不扩展用于精灵的元素的网站），再加上一个好的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强制执行

1 个答案: