2

CSS

我有一些简单的 CSStext-indent在liin上应用负值ul：

<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 之外的所有浏览器中都会产生一致的结果。这是我在浏览器中看到的：

所有浏览器与 IE8

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

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

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

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

4

1 回答 1

1

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

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

编辑

因此，以防我的回答不清楚......列表项除了包含文本外，还用于许多事情。一些网站使用它们进行布局。列表项还具有填充和列表样式等属性，可让您控制用于每个列表项的图像。

因此，知道了这一点后，似乎可以通过几种方式来处理要求列表项进行文本缩进的处理。您可以缩进任何包含文本，或者缩进可能是指列表项本身，包括图像；）我敢打赌，这个决定由浏览器决定，因此版本之间的处理方式不同。

希望这有助于澄清我的去向。

于 2012-06-14T20:07:47.640 回答