当INLINE-BLOCK和TEXT-INDENT遇到IE6,IE7

  次阅读 作者:智能小宝 来源:互联网 2016-03-25 16:16 我要评论(0)

代码如下

复制代码

#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元素没有偏移,那么解决之道是?

本站文章信息来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 韩春雨称已能重复实验结果 近期将有消息公布

    韩春雨称已能重复实验结果 近期将有消息公布

  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

    无人驾驶汽车如何改变城市生活?听听他们怎么说

  • 未来两年人工智能要怎么走?看这篇就够了

    未来两年人工智能要怎么走?看这篇就够了

  • 英国研发“杀生”机器人 通过生命体获取能量

    英国研发“杀生”机器人 通过生命体获取能量

网友点评网友点评
阅读推荐阅读推荐

据国外媒体报道,在过去两年内,聊天机器人(chatbot)、人工智能以及机器学习的研发和采用取得了巨大进展。许多初创公司正利用人工智能和...

霍金 视觉中国 图 英国著名物理学家霍金(Stephen Hawking)再次就人工智能(AI)发声,他认为:对于人类来说,强大AI的出现可能是最美妙的...

文|郑娟娟 今年,人工智能(AI) 60岁了。在AI60岁的时候,笔者想要介绍一下AI100,一个刚刚2岁的研究项目,但它的预设寿命是100年,甚至更长...

AlphaGo与李世石的人机大战,为大众迅速普及了人工智能的概念。 但对谷歌而言,除了下围棋,现在的人工智能进展到哪一步了?未来,人工智能...