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 问题的更多相关文章

  1. IE6 7下常见CSS兼容性处理

    以下是一些比较常见的IE6 7下的兼容性问题. 在当下这个时代,其实我们几乎可以不用再去针对IE6做兼容性的处理,除非你的公司还是诡异的要求你兼容到IE6.但是了解一些常见的兼容性问题还是可以帮助我们 ...

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

    opacity在IE6~8下无效果,解决的办法 问题出现时rgba()在ie6下不出效果,最后查到是opacity的问题. opacity是css3时出现的,目前主流浏览器都支持.but老IE是个麻烦 ...

  3. 关于ie6/7下的z-index

    z-index这个属性其实在挺多地方都会用到,在百度上搜索也有大量关于z-index的篇幅去阐述这个属性,特别是在ie6下的z-index处理有更多的相关文章,本文就不再围绕z-index这一属性的基 ...

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

    IE6/IE7下对display:inline-block的支持性不好. 1.inline元素的display属性设置为inline-block时,所有的浏览器都支持: 2.block元素的displ ...

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

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在 ...

  6. z-index兼容问题:关于ie6/7下的z-index

    z-index这个属性其实在挺多地方都会用到,在百度上搜索也有大量关于z-index的篇幅去阐述这个属性,特别是在ie6下的z-index处理有更多的相关文章,本文就不再围绕z-index这一属性的基 ...

  7. ie6,7下js动态加载图片不显示错误

    ie6,7下js动态加载图片不显示错误 先描述一下出现这种匪夷所思bug的背景: 我在页面加载的时候加载一堆小缩略图,<a href="javascript:void(0);" ...

  8. ie6,ie7下设置overflow:auto下滚动条不起作用

    今天遇到一个比较特殊的情况:ie6,ie7下设置overflow:auto下滚动条出来了但是滚动条不起任何作用,但在火狐,ie8,ie9,谷歌等浏览器下正常显示,解决方案:只需要加一个position ...

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

    最近做了好多网站专题页面,因为专题页面图片较多,个别banner上有1个到多个按钮,一种是用“图解img标签的usemap”的方法做链接,(图解img标签的usemap使用方法)[传送门] 另一种用则 ...

  10. IE6条件下的bug与常见的bug及其解决方法

    1.IE6条件下有双倍的margin 解决办法:给这个浮动元素增加display:inline属性 2. 图片底部有3像素问题 解决办法:display:block;或者vertical-align: ...

随机推荐

  1. Leetcode: Ones and Zeroes

    In the computer world, use restricted resource you have to generate maximum benefit is what we alway ...

  2. Excel标题与索引的对应关系

    /// <summary> /// 返回对应标题的索引 /// </summary> /// <param name="columnTitle"> ...

  3. UVALive 7143 Room Assignment(组合数学+DP)(2014 Asia Shanghai Regional Contest)

    题目链接:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&category=6 ...

  4. Hybrid技术的设计与实现(转)

    浅谈Hybrid技术的设计与实现 前言 随着移动浪潮的兴起,各种APP层出不穷,极速的业务扩展提升了团队对开发效率的要求,这个时候使用IOS&Andriod开发一个APP似乎成本有点过高了,而 ...

  5. http 协议集合,超级简单

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Web; ...

  6. 初试Node —— node.js的安装

    可以在这里查看最新版本: http://nodejs.org/download/ 在Mac下安装相当简单,只需要下载Mac OS X Installer (.pkg),然后一路下一步即可. 在Linu ...

  7. java equals和==的区别

    大概说equals和==都比较的是什么: 1. boolean tem = a == b; 首先==比较的肯定是地址,从堆栈的角度说也就是说==比较的是栈上面的内容.因为栈是用来存放地址或是java中 ...

  8. mysql 5.6 online ddl

    innodb存储引擎实现online ddl的原理是在执行创建或删除操作的同时,将DML操作日志写入到一个缓存中,待完成索引创建后再重做应用到表上,以此达到数据的一致性,这个缓存大小由参数innodb ...

  9. 图片使用base64展示代码,后台为jfinal

    前台使用ajax获取数据,下面步骤为把图片对应的id获取到,然后判断是否为空,不为空则发送请求获取数据,数据为base64数据格式: img需要注明数据类型格式:即data:image/jpg:bas ...

  10. [Linux系统]查看内存的几种方式

    1. cat /proc/meminfo 2.free -m3.vmstat -s4.ps命令可以实时的显示各个进程的内存使用情况.Reported memory usage information ...