CSS Sprites - 代码在 Chrome 中有效，在 FF 和 IE 中失败......为什么？
我正在使用精灵来控制两个图形导航元素。我写的CSS在Chrome中完美运行，但在FF和IE中失败。
CSS 是：
a.gallery-left{
margin-top: 5px;
background: url('arrows_sprited.png') 0 0px;
width: 45px;
height: 34px;
overflow: hidden;
float: left;
}
a.gallery-left:hover {
background: url('arrows_sprited.png') -46 0px;
cursor: pointer;
zoom: 1;
}
a.gallery-right{
margin-top: 5px;
background: url('arrows_sprited.png') -133 0px;
width: 46px;
height: 34px;
overflow: hidden;
float: right;
}
a.gallery-right:hover {
background: url('arrows_sprited.png') -89 0px;
cursor: pointer;
zoom: 1;
}
在 html 文档中通过以下方式调用：
<a class="gallery-left"></a>
<a class="gallery-right"></a>
为什么它在 FF 中失败？ 当我用 firebug 检查元素时，第二个元素不可见（但它在第一个元素中。很奇怪。
有什么想法吗？ 非常感谢！
I am using sprites to control two graphical navigation elements. The CSS I have written works perfectly in Chrome, but fails in FF and IE.
The CSS is:
a.gallery-left{
margin-top: 5px;
background: url('arrows_sprited.png') 0 0px;
width: 45px;
height: 34px;
overflow: hidden;
float: left;
}
a.gallery-left:hover {
background: url('arrows_sprited.png') -46 0px;
cursor: pointer;
zoom: 1;
}
a.gallery-right{
margin-top: 5px;
background: url('arrows_sprited.png') -133 0px;
width: 46px;
height: 34px;
overflow: hidden;
float: right;
}
a.gallery-right:hover {
background: url('arrows_sprited.png') -89 0px;
cursor: pointer;
zoom: 1;
}
Invoked in the html document by this:
<a class="gallery-left"></a>
<a class="gallery-right"></a>
Why is it failing in FF?
When I examine the element with firebug, the second is not visible (but it is in the first . Very strange.
any ideas?
thank you very much!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
在偏移值后添加
px。第一个方法之所以有效，是因为该值为 0，这在所有单位类型中都是通用的。
add the
pxafter the offset values.In the first it worked because the value is 0 which is universal in all unit types.
内联元素不支持宽度或高度值。它们的宽度和高度将完全适合它们包含的任何文本，在本例中为空字符串。
将
更改为或将其设置为display: block。Inline elements do not honor width or height values. They will have exactly the width and height that fits whatever text they contain, in this case an empty string.
Either change the
<a>to<div>or make itdisplay: block.