为什么列表项上的这个简单的否定文本缩进适用于除IE8之外的所有浏览器？

Question

CSS

我有一些简单的CSS可以在text-indent的{​​{1}}上应用否定li值：

ul

由于Internet Explorer 8及更低版本处理列表项边距和填充不同于现代浏览器，我使用IE8及以下的条件注释来应用不同的填充和边距值。 （附注：如果有人知道一个通​​用的，跨浏览器的CSS解决方案，以获得一致的边距/填充而不使用条件注释，我很满意。我需要支持IE6及更高版本，Chrome，Firefox，Safari和Opera。 ）

HTML

这是我的HTML：

<style type="text/css">
    ul.indent li { text-indent: -20px; padding-left: 20px; }
</style>

<!--[if lte IE 8 ]>
<style type="text/css">
    ul.indent li { text-indent: -20px; padding-left: 0; margin-left: 20px; }
</style>
<![endif]-->

第一个列表完全没有样式（作为实验的控件），第二个列表使用上面定义的CSS类（<ul> <li>Lorem ipsum...</li> </ul> <ul class="indent"> <li>Lorem ipsum...</li> </ul> ）。

结果

问题在于：上面的HTML / CSS会在IE8以外的所有浏览器中生成一致的结果 。这就是我在浏览器中看到的内容：

我在IE6，IE7，IE9，Chrome，Firefox，Safari和Opera的左侧看到了什么。

我在IE8中看到了右侧的内容。注意以红色突出显示的区域。只要将负的文本缩进值添加到CSS，IE8就会在列表项目项目符号和列表项文本之间抛出一堆额外的像素。

如何防止IE8添加这些额外像素？

您可以在此处查看代码：http://jsfiddle.net/Kxb8v/

Answer 1

UL和LI元素是块级元素......这可能是它在浏览器级别上无法预测的原因。如何将该文本包装在p标记中然后应用text-indent，因为它不适用于块级元素。

<style type="text/css">
    .indent { text-indent: -20px; padding-left: 20px; }
</style>


<ul>
    <li><p class="indent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce venenatis mi sit amet mauris varius ut viverra magna eleifend. Aliquam viverra, magna sed mollis adipiscing, libero mi adipiscing ante, ut hendrerit lacus leo id elit. Nulla commodo mi nec nulla ornare congue.</p></li>
</ul>

修改

所以，以防万一我的回答不清楚...除了包含文本之外，列表项还用于许多事情。有些网站使用它们进行布局。列表项还具有填充和属性，如 list-style ，允许您控制用于每个列表项的图像。

因此，知道这一点，似乎要求列表项 text-indent 可以通过几种方式处理。你可以缩进任何包含文本，或者缩进是指列表项本身，包括图像;）我敢打赌这个决定留给浏览器，因此版本之间的处理方式不同。

希望这有助于澄清我的目标。