当inline-block遇到text-indent，IE67生气了

最新推荐文章于 2021-06-15 15:55:47 发布
最新推荐文章于 2021-06-15 15:55:47 发布
阅读量592 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sbt0198/article/details/9790247
本文探讨了IE67浏览器中inline-block布局与text-indent属性之间的冲突问题，由于IE67并非真正支持inline-block，导致text-indent属性应用出现异常。文章提出了放弃使用text-indent并采用font-size:0;line-height:0;作为替代方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

恩！！我们都知道，IE67本身是不支持inline-block的。而是通过zoom来触发元素的layout。然后显示inline属性。平时一直这样用着不存在任何问题。

但如果要使用text-indent时，IE67真的生气了。IE67不是真正的inline-block，所以将text-indent传递给了它爹(父元素)。造成了怪异模式。

木有办法，只能放弃text-indent，你懂得。这个时候font-size:0;line-height:0;或许是不错的选择。

IE6中a标签同时使用inline-block与text-indent时出现的BUG
09-25
IE6中inline-block与text-indent同时使用时没想到也存在BUG,给a标签加上文本后使用text-indent将文字“隐藏”掉,在谷歌中显示完好，放到IE6中测试，却显示的很诡异,于是搜集整理中
浅谈inline-block及解决空白间距
11-30
然而，在使用 `display: inline-block` 时，经常会遇到一个问题，那就是元素间会存在额外的空白间距。本文将探讨这个问题及其解决方案。 首先，当我们将元素设置为 `display: inline-block` 时，这些元素会按照文本...
当inline-block和text-indent遇到IE6,IE7
dgk62408的博客
04-20 110
在实际应用中，考虑到seo，很多button，icon都要用到inline-block和text-indent来处理，例如： <a href="#" class="btn">Button</a> css我习惯写成这样 .btn{display:inline-block; width:100px; height:23px; text-indent:...
IE6和7下text-indent导致inline-block标签消失的bug
diaosheng8387的博客
01-24 110
在实际应用中，考虑到seo，很多button，icon都要用到inline-block和text-indent来处理，例如： <a href="#" class="btn">Button</a> css我习惯写成这样 .btn{display:inline-block; width:100px; height:23px; text-indent:...
html text-indent,css之text-indent
weixin_34370877的博客
06-15 880
text-indent(一个在ie6下有着奇怪表现的属性)text-indent作为大家都很熟悉的一个css属性，应该都不太会对这个属性去做过多的研究。我本来也是觉得这属性也就这样了，直到今天遇到的一个以前未注意过的bug...先看下w3school对text-indent的介绍：定义text-indent 属性规定文本块中首行文本的缩进。注释：允许使用负值。如果使用负值，那么首行会被缩进到左边。...
【转】当inline-block和text-indent遇到IE6,IE7
weixin_30736301的博客
03-31 106
在实际应用中，考虑到seo，很多button，icon都要用到inline-block和text-indent来处理，例如：<a href="#" class="btn">Button</a>css我习惯写成这样.btn{display:inline-block; width:100px; height:23px; text-indent:-9999px;backgroun...
display:inline-block是什么意思
柯思铭的博客
11-07 2437
很多时候我们必须使一些块元素并排显示，一般想到的是必须使用浮动，但是块元素浮动给边距(margin)的时候在IE下会出现加倍的BUG，所以很多时候不得不把这个块元素套在一个内联元素里面，然后给内联元素浮动和边距。今天看到了怿飞、秦歌和乌龙茶关于display:inline-block的文章，很不错，综合一下，记录下来。 display:inline-block 简单来说就是将对象呈递为内联对象，
inline-block和text-indent在IE6,IE7下同时使用的兼容问题解决方法
weixin_30304375的博客
12-26 118
在实际应用中，考虑到seo，很多button，icon都要用到inline-block和text-indent来处理，例如： <a href=”#”>Button</a> 当我们把css写成这样 .btn{display:inline-block; width:100px; height:23px; text-indent:-9999px;backgroun...
PHP四边都有空白区域,去掉display:inline-block元素间的多余空白
weixin_34711121的博客
04-04 157
如下一段代码，display:inline-block元素间的多余空白：*{margin:0; padding:0;}body{font:12px/20px Tahoma, Geneva, sans-serif; padding:200px;}img {border:0;}ul li{ list-style:none;}.test{width:200px; border:1px blue soli...
text-indent无效解决方案
angou6476的博客
12-11 257
text-indent是用来字符缩进的。 1.text-indent所在的元素是行内元素而非块级元素。比如用在span,a等行内元素上。解决方案：在行内元素加上display:block; 或者把目标元素放入<div>等块级元素，然后把text-indent样式应用到<div>等块级元素。 2.text-indent所在的元素未使用overflow属性。解决方...
兼容性的 inline-block 属性
FuDesign2008的专栏
09-15 728
一年前网上还找不到关于 inline-block 属性的文章，为了方便大家更好的理解该属性，当时总结整理了篇《display:inline-block的深入理解》。 而现在对于 inline-block 属性运用的需求也越来越多，可惜依旧只有 Firefox3 beta、I
模拟兼容性的 inline-block 属性
10-30
1. 为IE6和IE7触发hasLayout：可以通过设置 `zoom:1` 或者将元素的 `position` 属性设置为 `relative` 来触发IE的hasLayout特性，从而模拟 `inline-block` 的效果。 2. Firefox私有属性：旧版的 Firefox 2 使用 `-...
RGBA与半透明背景
懒人改变世界
12-22 8506
概念 所谓RGBA颜色，就是RGB三原色加ALPHA。在给背景添加颜色的同时，提供透明度特性。   使用方法 background:rgba(90,90, 54, 0.5); 支持情况 Firefox 3.0.5 支持 Safari 支持 Google Chrome 支持 IE
jQuery修改css before中的content值及scale的妙用
懒人改变世界
06-28 7994
原始的CSS.c:before {display:block;font-size:12px;content:" ";-webkit-transform:scale(.7);}jQuery修改值$("head").append('<style>.c:before {content:"hello world"}</style>');-webkit-transform:scale(.7) 真是个好东西啊，
关于 IE6 中绝对定位(position:absolute)中的left和bottom属性失效
懒人改变世界
03-29 1553
解决方法是：触发layout。 1：设置宽度或高度(使用left和bottom)，来触发layout 2：设置zoom：1，来触发layout
IE6中margin-bottom为负值时失效
懒人改变世界
08-26 1446
为什么要用负值就不多说了，反正重复的使用
a标签中正确的使用text-indent
懒人改变世界
06-28 1434
关于a标签中正确的使用text-indent，注意表明overflow:hidden；否则虚线框会让你很难堪的。。
抽奖项目总结
懒人改变世界
06-01 1163
js快速开发包，首次应用于项目，大大的提高了开发效率，从此再也不怕弹层和分页一类的事情了，很多东西都简单化了，还是要利用空闲时间完善。本次开发中location.href把我折腾死了，在利用location来实现reload的时候还是有很多东西需要注意的，比如”#”，在链接中被认为是锚点去跳转的，也就是实际上并没有跳转。在使用js与as交互时，还是有很多东西需要注意的。 swfobject的作用，除
纯代码无图片Tips实现过程
懒人改变世界
04-13 1047
前些日子，用百度的时候发现了一个tips效果，感觉不错，就手残的按了F12，看了一下实现过程，刚开始的时候发现很神奇，即没使用图片，也没使用“◇”符号，当然也没有css3的元素。先看下效果：查看并不停的尝试，终于知道怎么实现的了首先是最重要的实现部分：.arrows { position:absolute; display:block; width:0; height
解决inline-block元素空白间距问题与优化方法
本文主要探讨了在HTML和CSS中使用`display: inline-block`时遇到的空白间距问题，特别是在多个元素并排排列时，由于浏览器默认的行内元素间距可能会导致多余的空白。作者通过实例展示了一个包含多个`<a>`标签的`div`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值