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: ...
随机推荐
- Leetcode: Ones and Zeroes
In the computer world, use restricted resource you have to generate maximum benefit is what we alway ...
- Excel标题与索引的对应关系
/// <summary> /// 返回对应标题的索引 /// </summary> /// <param name="columnTitle"> ...
- UVALive 7143 Room Assignment(组合数学+DP)(2014 Asia Shanghai Regional Contest)
题目链接:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&category=6 ...
- Hybrid技术的设计与实现(转)
浅谈Hybrid技术的设计与实现 前言 随着移动浪潮的兴起,各种APP层出不穷,极速的业务扩展提升了团队对开发效率的要求,这个时候使用IOS&Andriod开发一个APP似乎成本有点过高了,而 ...
- http 协议集合,超级简单
using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Web; ...
- 初试Node —— node.js的安装
可以在这里查看最新版本: http://nodejs.org/download/ 在Mac下安装相当简单,只需要下载Mac OS X Installer (.pkg),然后一路下一步即可. 在Linu ...
- java equals和==的区别
大概说equals和==都比较的是什么: 1. boolean tem = a == b; 首先==比较的肯定是地址,从堆栈的角度说也就是说==比较的是栈上面的内容.因为栈是用来存放地址或是java中 ...
- mysql 5.6 online ddl
innodb存储引擎实现online ddl的原理是在执行创建或删除操作的同时,将DML操作日志写入到一个缓存中,待完成索引创建后再重做应用到表上,以此达到数据的一致性,这个缓存大小由参数innodb ...
- 图片使用base64展示代码,后台为jfinal
前台使用ajax获取数据,下面步骤为把图片对应的id获取到,然后判断是否为空,不为空则发送请求获取数据,数据为base64数据格式: img需要注明数据类型格式:即data:image/jpg:bas ...
- [Linux系统]查看内存的几种方式
1. cat /proc/meminfo 2.free -m3.vmstat -s4.ps命令可以实时的显示各个进程的内存使用情况.Reported memory usage information ...