CSS Sprites - 代码在Chrome中运行，在FF和IE中失败......为什么？

我使用精灵来控制两个图形化的导航元素。我写过的CSS完全在Chrome中运行，但在FF和IE中失败。CSS Sprites - 代码在Chrome中运行，在FF和IE中失败......为什么？

的CSS是：

<a class="gallery-left"></a> 
    <a class="gallery-right"></a>

为什么在FF失败：

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文档中？当我检查与萤火虫的元素，二是不可见的（但它是第一个。很奇怪。

什么想法？非常感谢你！

来源

2010-12-08 Will Gill

偏移值之后添加px。

background: url('arrows_sprited.png') 0px 0px; 
background: url('arrows_sprited.png') -46px 0px; 
background: url('arrows_sprited.png') -133px 0px; 
background: url('arrows_sprited.png') -89px 0px;

在第一个它的工作，因为该值是0，这是所有单位类型普遍。

来源

2010-12-08 22:27:57

有趣的是，如果只给出一个整数，Chrome将默认为px。 – 2010-12-08 22:31:04

做到了这一招...至少在Firefox中！（在IE中，我有一大堆其他东西都失败了..该死的IE）。谢谢！ – 2010-12-09 05:41:37

内联元素不孝敬宽度或高度值。他们将有完全WIDT h和高度适合他们包含的任何文本，在这种情况下是一个空字符串。

请将<a>更改为<div>或将其设为display: block。

来源

2010-12-08 22:32:21 slebetman

CSS Sprites - 代码在Chrome中运行，在FF和IE中失败......为什么？

回答

相关问题