Chrome与Edge中项目符号列表显示异常问题求助

你的问题出在list-style-position: inside与text-indent、padding-left的组合上——不同浏览器对内部列表符号的排版计算逻辑存在差异，Firefox能正确解析这种缩进补偿，但Chrome和Edge会出现首行缩进过度的问题。

直接改用伪元素生成项目符号的方案，完全规避浏览器默认样式的差异，同时保持符号和文字颜色不同的需求：

修改后的CSS代码 #

ul.bt-bullet {
  margin-left: 0;
  padding-left: 0; /* 清除默认内边距 */
}

ul.bt-bullet li {
  list-style: none; /* 隐藏默认列表符号 */
  position: relative; /* 为伪元素定位做容器 */
  padding-left: 2.4em; /* 留出符号+间隔的位置 */
  padding-bottom: 10px;
  font-size: 25px;
  line-height: 25px;
}

/* 用伪元素生成自定义项目符号 */
ul.bt-bullet li:before {
  content: "•"; /* 圆点符号，可替换为其他符号 */
  color: #F18D21; /* 符号颜色 */
  position: absolute;
  left: 0; /* 固定到容器左侧 */
  width: 1.4em; /* 符号宽度，和原方案一致 */
  text-align: left;
}

ul.bt-bullet li span {
  font-family: "Roboto", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 22px;
  margin-left: 10px;
  color: #000000;
}

对应的HTML代码（无需修改，保持原结构即可） #

<ul class="bt-bullet">
  <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis facilisis turpis, vitae pulvinar lorem maximus nec. Maecenas non blandit justo. Sed volutpat arcu diam, vestibulum luctus urna fermentum quis. Vestibulum vitae justo vestibulum, posuere tortor sit amet, faucibus urna.</span></li>
  <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis facilisis turpis, vitae pulvinar lorem maximus nec. Maecenas non blandit justo. Sed volutpat arcu diam, vestibulum luctus urna fermentum quis. Vestibulum vitae justo vestibulum, posuere tortor sit amet, faucibus urna.</span></li>
  <li><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lobortis facilisis turpis, vitae pulvinar lorem maximus nec. Maecenas non blandit justo. Sed volutpat arcu diam, vestibulum luctus urna fermentum quis. Vestibulum vitae justo vestibulum, posuere tortor sit amet, faucibus urna.</span></li>
</ul>

方案说明 #

• 用li:before生成的符号完全由CSS控制，不会受浏览器默认列表样式的影响，跨浏览器表现一致
• 通过position: absolute将符号固定在列表项左侧，不占用文本流空间，多行文本自然对齐
• 保留了你原本的颜色、字体、间距等样式需求，仅调整了符号的实现方式

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