[原]由text-indent引起的问题
Ghost 发表于 [2007-08-22 13:13]
今天在做东西的时候不小心发现了由于定义了text-indent而引起的宽度问题，主要是定义了首页行缩进后宽度受影响。于是去群里问了一下，还是有收获的。豆豆猫提供了一个例子《IE显示宽度和高度的问题》，主要是说li奇、偶数时显示不同的问题，虽然他只是觉得这个Demo很奇怪，但后来我发现这个例子中的问题也是由于text-indent引起的，所以在这里也感谢豆豆猫，让我少走了不少路。
OK，相信大家也很想知道到底text-indent会引出什么bug，注意哦，在IE中才会出现。正常的情况下，定义首行缩进应该是不影响到宽度的，但从上面那个例子里可以看到，偶数列样例2（IE6下）的宽是比其它列要宽的。
问题很简单，我们以样例5为最终效果，让偶数列和奇数列两边的效果一样，重新做一次就知道了。具体看这里，看完你应该已经知道，text-indent会引起的问题还大的，因为我们还没有很好对付它的办法。所以，当遇到这种问题时，最好还是使用padding吧，至少还有解决方案。-_-||
文章地址：http://www.cssforest.org/blog/index.php?id=32
《[原]由text-indent引起的问题》采用的授权是创作共用的 “署名-非商业性使用-相同方式共享 3.0 通用许可”.
文章被分类到：CSS
linxz 在 814 日 之前 说：
实在愚钝，在IE6 IE7 FF2下测试过，好像text-indent没什么问题啊。
就是在IE7中margin-bottom无效了。
然后我按你的demo修改了一下，3个浏览器表现都正常，一样。
ul{ display:block; clear:both; list-style:none; width:215px; overflow:hidden; padding:0 0 5px; background-color:#3366CC;
}
li{ display:inline; float:left; width:100px; margin:5px 0 0 5px; background-color:#FFFF00; text-indent:20px; line-height:23px;
}
rain.kx 在 613 日 之前 说：
看到问题了。但是现在有没什么比较好的办法了呢？
毕竟padding有时候太厉害了。
不得不对他屈服了。。
zhang qian 在 407 日 之前 说：
补充： padding:4px 0 0 0;/*IE6 7 双边距叠加问题及解决方案*/ *padding:4px 0;
czcz 在 371 日 之前 说：
是的，我发现text-indent的确出问题了，但是我的问题不同。
在li里如果出现块级元素，而又刚好给li加了text-indent，那么每个行高就会高出2px的样子，这个现象在ie6/ie7里都存在。
开始我根本找不到答案，margin和padding全设０也无济于事，看了这篇文章我才知道是text-indent的问题，不过，仍然没有解决办法，我不想用padding，因为盒模型，很痛苦。