嵌套的无序列表在Chrome引擎中没有按我预期的方式显示文本缩进。Firefox可以正常工作

前端开发 2026-07-08

在Firefox中，所有的li项都会向左缩进（即减少缩进）。但在Chrome引擎（Chrome、Edge、Comodo）中，开始嵌套列表的那一项却没有向左缩进。使用开发者工具显示确实有向左缩进的设置被列出，但它并未生效。

在下面的示例代码中，问题出现在这行：“I keep these pets in a cage”，它没有向左缩进。

这是一个XHTML页面，所有验证器都说可以通过。上方图片来自Firefox，下方图片来自Edge（在Chrome和 Comodo中也一样）。没有Safari。

我是不是漏掉了什么？

.something {
  font-weight: bold
}

ul {
  margin-left: 1em;
}

li {
  padding-left: 3em;
  text-indent: -2em;
}

<!DOCTYPE html>
<html xml:lang="en" epub:prefix="z3998: http://www.daisy.org/z3998/2012/vocab/structure/" xmlns:epub="http://www.idpf.org/2007/ops" xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head>
  <title>Test</title>

</head>

<body>
  <p>My household pets</p>
  <ul>
    <li>There is a fluffy <b>cat</b></li>
    <li> The <b>dog</b> is small</li>
    <li> I keep these pets in a cage <ul>
        <li> The <span class="something">Mongolian Gerbil</span> is cute</li>
      </ul>
    </li>
  </ul>
</body>

</html>

更新：当前的变通方法是在嵌套的ul调用处再创建一个额外的空li。它将带有一个类名：

li.myzero {
    list-style-type: none;
    line-height: 0.9em;
}

新的XHTML页面将会是：

.something {
  font-weight: bold
}

ul {
  margin-left: 1em;
}

li {
  padding-left: 3em;
  text-indent: -2em;
}

li.myzero {
  list-style-type: none;
  line-height: 0.9em;
}

<!DOCTYPE html>
<html xml:lang="en" epub:prefix="z3998: http://www.daisy.org/z3998/2012/vocab/structure/" xmlns:epub="http://www.idpf.org/2007/ops" xmlns="http://www.w3.org/1999/xhtml" lang="en">

<head>
  <title>Test</title>
</head>

<body>
  <p>My household pets</p>
  <ul>
    <li>There is a fluffy <b>cat</b></li>
    <li>The <b>dog</b> is small</li>
    <li>I keep these pets in a cage</li>
    <li class="myzero">
      <ul>
        <li> The <span class="something">Mongolian Gerbil</span> is cute</li>
      </ul>
    </li>
  </ul>
</body>

</html>

结果如下图所示：

如果有人有更好的解决办法，请告诉我。

解决方案

一种稍微好点的变通方法是把“I keep these pets in a cage”放到一个块级元素中，例如一个 <div>。

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
<head>
<title>Test</title>
<style>
     .something { font-weight: bold }
     ul {
    margin-left: 1em;
}
     li {
    padding-left: 3em;
    text-indent: -2em;
}

</style>
</head>
<body>
<p>My household pets</p>
<ul>
 <li>There is a fluffy <b>cat</b></li>
 <li> The <b>dog</b> is small</li>
 <li> <div>I keep these pets in a cage</div> <ul >
      <li> The <span class="something">Mongolian Gerbil</span> is cute</li>
 </ul></li>
</ul>
</body>
</html>

这显然是Chromium的一个bug，CSS规则规定无论<div>是否存在，盒子树都应保持相同。看起来应该包含“I keep these pets in a cage”的那个匿名块级框并没有像应有的那样从其父元素继承text-indent属性。

Safari与 Firefox的表现相同。

Chrome