列表项换行至多行时行高不一致的CSS问题排查

嘿，我之前也碰到过这种诡异的行高问题！咱们一步步拆解可能的原因和解决办法：

首先，先排除几个最常见的坑：

• 继承冲突：你给li设置了行高，但父元素ul.iconlist或者更上层容器可能继承了其他行高值，导致第三行渲染被干扰。可以给ul也加上相同的行高，确保整个列表行高统一：

  ul.iconlist {
    line-height: 1.42857143;
    margin: 0;
    padding: 0; /* 重置浏览器默认列表内边距，避免布局偏移 */
  }
  

• 浏览器默认样式干扰：浏览器会给li默认加一些margin或padding，有时候这些会和行高叠加，造成视觉上行高不一致的错觉。可以重置这些默认值：

  ul.iconlist li {
    line-height: 1.42857143;
    height: auto;
    margin: 0;
    padding: 0;
    display: block; /* 明确设置为块级，避免意外的inline渲染问题 */
  }
  

• 被其他CSS规则覆盖：打开浏览器开发者工具（按F12），选中有问题的列表项，查看「计算样式」面板，确认实际生效的line-height是不是你设置的值。如果不是，肯定是有更高优先级的规则（比如带!important的样式，或者更具体的选择器）覆盖了你的设置，找到它调整就行。

另外，注意到你的列表类名叫iconlist——会不会每个li前面都有图标？如果图标用了float或者inline-block，可能会导致文本垂直对齐异常，尤其是多行的时候。这种情况可以给图标加vertical-align: middle;，或者给li加overflow: hidden;清除浮动影响。

如果以上都没用，可以试试把小数行高换成带单位的（比如1.428em），虽然理论上小数行高是相对于字体大小的，但有些浏览器对极端小数的渲染可能有偏差——当然如果这个值是项目要求的，你可以先临时测试确认是不是这个问题。

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