如何移除HTML中summary内H1/H2标签的异常下划线？

解决方案 #

直接给H1、H2标签添加text-decoration: none;样式，覆盖可能的浏览器默认或继承样式：

h1, h2, h3, h4 {
  display: inline;
  text-decoration: none; /* 新增该行代码 */
}

如果上述方法无效，再补充添加border-bottom: none;确保无边框干扰：

h1, h2 {
  border-bottom: none;
}

原因分析 #

问题仅在窄窗口下触发且只针对H1/H2，大概率是以下两种情况：

• 部分浏览器对设置了display: inline;的标题元素，会默认添加文本下划线样式，窗口变窄导致标题换行时该样式显现
• 标题元素继承了summary或其他父元素的文本装饰样式，窄窗口下换行后样式范围变化，使得下划线可见

注：你代码中summary的border-bottom是整个容器底部的边框，和你描述的文本下方下划线不是同一元素，可排除该因素。

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