ie6、7下 text-indent 问题

text-indent属性 用于文字缩进,更多是用来隐藏文字。比如,一个logo标题,上面的问题很有艺术感,不得不把文字和背景组合成一张背景图(此处页面元素用a表示),但处于SEO方面的考虑,需要把a里面的文字隐藏掉,多数用该方法: text-indent:-9999px;,但在ie6、7中背景和文字会全部隐藏掉,分析出现问题的原因是,ie6、7中并没有真正的inline-block属性,而是通过设置display:inline-block触发了IE的layout, 从而使内联元素拥有了inline-block属性的表症,解决方法:

element{display:inline-block !important;display:block;}

ie6、7中都支持!important属性,只是在ie6终会有小bug,后面的属性会覆盖前面的属性(即便前面有!important),但如果分开写就完美了,如下:

element{display:inline-block !important;display:block;}

element{display:inline;}

这样写(不管先后顺序),ie6就和其他浏览器表现一致了!

关于实现ie6、7的display:inline-block;属性方法:

element{display:inline-block;*display:inline;zoom:1;}

这样通过zoom触发IE的layout,就让内联元素拥有inline-block属性的特性。

关于ie6、7中,text-indent会导致inline-block元素出现偏移甚至消失的问题,做了如下解决方式:

1.添加display:block;属性;

2.添加float:left|right;属性;

3.去除text-indent属性,设置font-size:0;line-height:0;

4.设置*text-indent:0;*line-height:300px;注意此方法要有宽高设置overflow:hidden;

时间: 2024-12-15 10:44:27

ie6、7下 text-indent 问题的相关文章

浮动在IE6,7下的一些问题

1.首先如果两个元素要并在同一行,使用float最好两个都加浮动 2.IE6下双边距问题,当有块级元素浮动的时候,该元素的横向margin值会被放大为两倍,解决办法:给该元素加display:inline即可. 3.li的一些问题 a:如果有两列布局,我们仅仅给右边加有浮动,在IE6,7下会折行,解决办法:正如第一条建议一样,要并在同一行的元素,最好都加浮动,所以这里只要给左列的元素也加上左浮动. b.IE6,7下LI内部的元素都浮动的话,li之间会有4px的间隙.解决办法:给li加vertic

为什么IE6浏览器下line-height属性不管用了

为什么IE6浏览器下line-height属性不管用了:建议:尽可能的手写代码,可以有效的提高学习效率和深度.并不是所有的情况都会导致line-height属性在IE6浏览器下失效, 而是在特定条件才会遇到.例如以下代码就是正常的: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http

opacity在IE6~8下无效果,解决的办法

opacity在IE6~8下无效果,解决的办法 问题出现时rgba()在ie6下不出效果,最后查到是opacity的问题. opacity是css3时出现的,目前主流浏览器都支持.but老IE是个麻烦的问题. 查找网络后,发现解决办法大多都没用了. filter:alpha(opacity=50);     X 总结网上经验: 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset='utf-8'> 5 <

IE6浏览器下3px解决方法

IE6浏览器下3px解决方法:建议:尽可能的手写代码,可以有效的提高学习效率和深度.IE6下的3px问题的产生主要应该归咎于书写不规范造成的,比如我们要写一个左右两列的结构,代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/&quo

js省市二级联动菜单,IE6,FF下测试通过

<html> <head> <meta http-equiv="Content-Language" content="zh-cn" /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>二级联动js,IE6,FF下测试通过</title> <s

IE6浏览器下div无法遮盖select下拉框解决方法

IE6浏览器下div无法遮盖select下拉框解决方法:在IE6浏览器下,select下拉框无法被div遮盖,其他的主流浏览器都是正常的.这里简单介绍一下如何解决此问题.默认状态下IE6的表现: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.51texiao.cn

IE6/IE7下:inline-block解决方案

IE6/IE7下对display:inline-block的支持性不好. 1.inline元素的display属性设置为inline-block时,所有的浏览器都支持: 2.block元素的display属性设置为inline-block时,IE6/IE7浏览器是不支持的: 对象呈递为内联对象,但是对象的内容作为块对象呈递.旁边的内联对象会被呈递在同一行,允许空格.(准确地说,应用此特性的元素现为内联对象,周围元素保持在同一行,但可以设置宽度和高度等块元素的属性) IE中对内联元素使用displ

ie6/7下给table的行tr 添加position:relative;的奇特bug,求大神告知

代码: <!DOCTYPE html> <html> <head> <title>ie6/7下给table的行tr 添加position:relative;的奇特bug,求大神告知</title> <style> * { padding: 0; margin: 0; } table tr { position: relative;float:left;overflow:hidden;z-index:1;height:100%;widt

空a标签 a标签空的情况下 IE6 IE7下点击无效

最近做了好多网站专题页面,因为专题页面图片较多,个别banner上有1个到多个按钮,一种是用"图解img标签的usemap"的方法做链接,(图解img标签的usemap使用方法)[传送门] 另一种用则需要用空a标签来做,发现"a标签"在IE6与IE7中点击无效中点击不了("a标签"定义宽度和高度IE浏览器为零0),其他浏览器都正常(如果不正常请加"display:bolck;"(←推荐)或"float:left;&q

IE6/IE7下margin-bottom失效兼容解决办法及双倍边距问题

(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在父标签中加入overflow:hidden:或zoom:100%示例代码: 不正常显示 ul{} li{ list-style:none; float:left; margin:10px;} 1. 你会发现左边10px 变成20px了, 解决办法:在li的CSS中加入:display:inline