html - 为什么这个简单的列表项负文本缩进在除 IE8 之外的所有浏览器中都有效？

Question

CSS

我有一些简单的 CSS 可以在 ul 中的 li 上应用负的 text-indent 值:

<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]-->

由于 Internet Explorer 8 及更低版本处理列表项边距和填充的方式与现代浏览器不同，因此我使用 IE8 及更低版本的条件注释来应用不同的填充和边距值。 (旁注:如果有人知道一种通用的、跨浏览器的 CSS 解决方案，可以在不使用条件注释的情况下获得一致的边距/填充，我洗耳恭听。我需要支持 IE6 及更高版本、Chrome、Firefox、Safari 和 Opera。 )

HTML

这是我的 HTML:

<ul>
    <li>Lorem ipsum...</li>
</ul>

<ul class="indent">
    <li>Lorem ipsum...</li>
</ul>

第一个列表完全没有样式(作为实验的对照)，第二个列表使用上面定义的 CSS 类 (class="indent")。

结果

这就是问题所在:上面的 HTML/CSS 在除 IE8 之外的所有浏览器中 都产生了一致的结果。这是我在浏览器中看到的:

我在 IE6、IE7、IE9、Chrome、Firefox、Safari 和 Opera 中看到左侧的内容。

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

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

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

Answer 1

UL 和 LI 元素是 block 级元素……这可能就是它在浏览器级别上不可预测的原因。将该文本包装在 p 标记中，然后应用文本缩进怎么样，因为它不适用于 block 级元素。

<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 似乎可以通过几种方式来处理。您可以缩进任何包含的文本，或者缩进可能指的是列表项本身，包括图像 ;) 我打赌这个决定由浏览器决定，因此在不同版本之间的处理方式可能不同。

希望这有助于阐明我的目标。