代码如下
复制代码
#iconautente{
background-image:url('/style/images/spritecommon.png'); /*icona_utente.png*/
background-position:-117px -15px;
text-indent:-9000px;
width:20px;
height:23px;
display:inline-block;
}
<a id="iconautente" href="/admin/index.php教程">admin</a>
In Firefox, IE7 and IE8 under Vista, I see background and no text, as expected. In IE6 and IE8 under XP, the whole image is indented, not text, so the image is not shown.
在做一个按钮时,由于按钮的文字的艺术感太强直接跟背景一起切片,但是处于SEO考虑还是在a标签内添加了相应的文字,
<p> <a href="file.pdf" class="icon icon-pdf">Download PDF</a> </p>
常规CSS如下:
代码如下
复制代码
.icon { display:inline-block; width:16px; height:16px; text-indent:-9999px; }
.icon-pdf { background-image:url(pdf.png); }
嗯,在FF,Chrome IE8,XXX主流浏览器下展现得很完美,处于恶心的原因忘记在IE6,7下看了...
嗯,几天后测试跑过来说漂漂的按钮怎么在IE6,7下消失了,当时就惯性的打开浏览器并开启调试工具一通折腾,最后找到解决方案,调整下样式如下:
代码如下
复制代码
.icon { display:block; width:16px; height:16px;text-indent:-9999px}
或
.icon { display:inline-block; width:16px; height:16px; font-size:0; line-height:0; }
或者修改你的html如下:
<p><a href="file.pdf" class="icon icon-pdf">Download PDF</a> </p>
给a标签前加上 等等等方法...
inline或inline-block元素设置text-indent在IE6/IE7中显示不正常的bug致使text-indent会传递到父及元素，也就出现了上文中的结果。
造成这种情况的原因应该是IE6/IE7并没有真正实现inline-block,而是通过设置display:inline-block触发了IE的layout,从而使内联元素拥有了inline-block属性的表症。
考察元素的默认样式，可知：input、select、button、textarea的默认display皆为inline-block,所以在布局时应加以注意...
代码如下
复制代码
* html #iconautente{text-indent:0; line-height:0; font-size:0; overflow:hidden}/*ie6 hack */
*:first-child+html #iconautente{ text-indent:0; line-height:0; font-size:0; overflow:hidden}/*ie7 hack */
考察各浏览器对inline-block的支持情况，结果如下：
IE6、7及兼容模式下的IE8不完全支持。只对默认具有inline布局的元素有效
IE8、FF、Safari、Chrome、Opera支持
这样看来，前面给出的代码应能很好地支行在目前主流的浏览器上。但测试结果显示：在IE6、7及兼容模式下的IE8中，按钮所在的位置空白一片，但可以看出它已经占据了页面上的某一位置。
问题出在text-indent上，测试结果显示：
text-indent为负时，元素向左偏移
text-indent为正时，元素向右偏移
在这种情况下，元素的偏移量由text-indent和margin值决定，如：margin-left::-10px; text-indent:10px相当于margin-left:0; text-indent:0元素没有偏移，那么解决之道是？
简单的解决方案是不要在IE6、7下使用inline-block，比如这样设置display:inline-block !important; display:block;，IE6、7不认识!important。这样IE6、7下会渲染成一个块级元素，而其他浏览器则显示为inline-block元素。
这次问题是出在inline-block和text-indent相遇了，那么这样的问题是否会出现在其他元素上呢？考察元素的默认样式，可知：input、select、button、textarea的默认display皆为inline-block。那么简单地考察下button的表现，代码如下：
代码如下
复制代码
<style type="text/css教程">
div{ border:4px solid blue; }
button{
width:100px;
height:24px;
border:medium none;
background:red;
text-indent:20px;
text-align:left;
padding:0;
}
</style>
<div><button>我是按钮</button></div>
