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;
ie6、7下 text-indent 问题的更多相关文章
- IE6 7下常见CSS兼容性处理
以下是一些比较常见的IE6 7下的兼容性问题. 在当下这个时代,其实我们几乎可以不用再去针对IE6做兼容性的处理,除非你的公司还是诡异的要求你兼容到IE6.但是了解一些常见的兼容性问题还是可以帮助我们 ...
- opacity在IE6~8下无效果,解决的办法
opacity在IE6~8下无效果,解决的办法 问题出现时rgba()在ie6下不出效果,最后查到是opacity的问题. opacity是css3时出现的,目前主流浏览器都支持.but老IE是个麻烦 ...
- 关于ie6/7下的z-index
z-index这个属性其实在挺多地方都会用到,在百度上搜索也有大量关于z-index的篇幅去阐述这个属性,特别是在ie6下的z-index处理有更多的相关文章,本文就不再围绕z-index这一属性的基 ...
- IE6/IE7下:inline-block解决方案
IE6/IE7下对display:inline-block的支持性不好. 1.inline元素的display属性设置为inline-block时,所有的浏览器都支持: 2.block元素的displ ...
- IE6/IE7下margin-bottom失效兼容解决办法及双倍边距问题
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在 ...
- z-index兼容问题:关于ie6/7下的z-index
z-index这个属性其实在挺多地方都会用到,在百度上搜索也有大量关于z-index的篇幅去阐述这个属性,特别是在ie6下的z-index处理有更多的相关文章,本文就不再围绕z-index这一属性的基 ...
- ie6,7下js动态加载图片不显示错误
ie6,7下js动态加载图片不显示错误 先描述一下出现这种匪夷所思bug的背景: 我在页面加载的时候加载一堆小缩略图,<a href="javascript:void(0);" ...
- ie6,ie7下设置overflow:auto下滚动条不起作用
今天遇到一个比较特殊的情况:ie6,ie7下设置overflow:auto下滚动条出来了但是滚动条不起任何作用,但在火狐,ie8,ie9,谷歌等浏览器下正常显示,解决方案:只需要加一个position ...
- 空a标签 a标签空的情况下 IE6 IE7下点击无效
最近做了好多网站专题页面,因为专题页面图片较多,个别banner上有1个到多个按钮,一种是用“图解img标签的usemap”的方法做链接,(图解img标签的usemap使用方法)[传送门] 另一种用则 ...
- IE6条件下的bug与常见的bug及其解决方法
1.IE6条件下有双倍的margin 解决办法:给这个浮动元素增加display:inline属性 2. 图片底部有3像素问题 解决办法:display:block;或者vertical-align: ...
随机推荐
- update kernel 3.10-3.12
安装包下载以及依赖包安装 1.到www.kernel.org下载3.12.48压缩包 2.tar xvf linux-3.12.48.tar.xz 3.sudo yum install ncurses ...
- Android 自定义 view(四)—— onMeasure 方法理解
前言: 前面我们已经学过<Android 自定义 view(三)-- onDraw 方法理解>,那么接下我们还需要继续去理解自定义view里面的onMeasure 方法 推荐文章: htt ...
- C++之路进阶——codevs3333(高级打字机)
3333 高级打字机 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 大师 Master 题目描述 Description 早苗入手了最新的高级打字机.最新款自然有着与 ...
- Samba文件服务器详细配置步骤
准备安装 环境:CentOS 6.3_x64bit 安装:Minimal(最小) 1.配置IP地址 2.挂载:[root@localhost ~]# mount -t iso9660 /dev/cdr ...
- 夺命雷公狗-----React---17--事件常用的属性
我们可以通过打印的方式将他打印出来看看,如下所示: <!DOCTYPE> <html> <head> <meta charset="utf-8&qu ...
- 无光驱在32位windows系统下安装64位windows系统
位的系统. 大家都知道,32位的操作系统最多只能支持3.2G的内存,现在内存白菜价,很多人都在原有基础上购入新内存,这样最少也有4G了,为了让内存不浪费,我 们只有升级到64位操作系统.但是很多朋友又 ...
- C# 自动Ping 测试服务器运行状况
通过小程序自动Ping配置文件中的IP地址,间隔时间.IP地址.手机号码通过配置文件获得. 废话不多说,上代码. using Newtonsoft.Json; using Newtonsoft.Jso ...
- DOM节点
DOM的一个想法 让我们从下面的HTML开始学习吧: <html> <head> <title>The title</title> </head& ...
- mysql 主从复制实现步骤
fuhi
- <Interview Problem>最小的“不重复数”
百度的一道笔试题目,看到博客园讨论挺热烈的,也写一下玩玩. 实现思想:举个简单的例子11233,从高位到低位开始判断是否有重复数,高位有重复数后,首先修改高位的,高位修改后变为12233,因为要求最小 ...