Chrome引擎浏览器嵌套无序列表text-indent显示异常求助

问题复现代码 #

CSS：

.something {
  font-weight: bold
}

ul {
  margin-left: 1em;
}

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

HTML：

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

临时方案（不够优雅） #

目前临时做法是新增一个空

，并给这个
• 加自定义样式：

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

  调整后的HTML把原li拆成两个，一个放文本，一个放嵌套列表，但这种拆分语义上不够合理，还多了冗余元素。

  更优解决方案 #

  方案1：文本内容单独包裹，精准控制缩进

  把

• 里的文本内容单独用块级元素（比如<p>）包裹，然后对这个块级元素应用悬挂缩进样式，避免嵌套列表影响li的text-indent渲染：

  修改后的CSS：

  .something {
    font-weight: bold
  }
  
  ul {
    margin-left: 1em;
  }
  
  /* 对li内的文本容器应用悬挂缩进 */
  li > p {
    padding-left: 3em;
    text-indent: -2em;
    margin: 0; /* 清除p默认边距，避免多余间距 */
  }
  
  /* 保持嵌套列表的缩进层级 */
  li > ul {
    margin-left: 1em;
  }
  

  修改后的HTML：

  <!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><p>There is a fluffy <b>cat</b></p></li>
      <li><p>The <b>dog</b> is small</p></li>
      <li>
        <p>I keep these pets in a cage</p>
        <ul>
          <li><p>The <span class="something">Mongolian Gerbil</span> is cute</p></li>
        </ul>
      </li>
    </ul>
  </body>
  
  </html>
  

  这种方法既保留了正确的语义结构，又让悬挂缩进在所有浏览器中一致生效，没有冗余元素。

  方案2：用Flex布局重构列表布局

  如果不想额外嵌套元素，可以用Flex布局直接控制li内部的标记和内容排列，彻底避免text-indent的浏览器差异：

  .something {
    font-weight: bold
  }
  
  ul {
    margin-left: 1em;
    padding-left: 0;
  }
  
  li {
    display: flex;
    align-items: flex-start;
    gap: 1em; /* 控制标记和文本的间距 */
    margin-left: 1em;
  }
  
  /* 利用伪元素模拟列表标记，也可以保留原生marker */
  li::before {
    content: "•";
    flex-shrink: 0;
    margin-left: -2em; /* 实现悬挂效果 */
  }
  
  li > ul {
    flex: 1;
    margin-left: 1em;
  }
  

  这种方法不需要修改HTML结构，通过Flex布局精准控制每一部分的位置，兼容性覆盖所有现代浏览器。

  内容的提问来源于stack exchange，提问作者OneQuestionOnly