Chrome中<hr>元素显示断裂的原因及修复方案咨询

我设置了带有边框的<hr>元素，该元素在Firefox浏览器中显示正常，但在Chrome浏览器里中间出现断裂现象。

预期显示效果：

Chrome实际显示效果：

当前使用的CSS样式：

hr {
  width: 90vw;
  border: 0.15em solid white;
  margin-top: 1em;
}

原因分析 #

Chrome对<hr>元素有特定默认样式，默认会应用类似border-style: inset的拆分边框逻辑。当直接设置统一的border样式时，无法完全覆盖Chrome的默认内部边框规则，导致默认半透明边框与自定义实色边框叠加，出现视觉上的断裂效果。而Firefox对<hr>的默认样式处理更简洁，自定义样式可以完全覆盖默认规则，因此显示正常。

修复方案 #

方案1：清除默认边框后重新设置 #

先通过border: none清除所有默认边框样式，再设置需要的边框（推荐使用border-top，符合<hr>作为水平线的常规用途）：

hr {
  width: 90vw;
  border: none;
  border-top: 0.15em solid white;
  margin-top: 1em;
}

如果确实需要<hr>带有完整边框，可使用以下代码：

hr {
  width: 90vw;
  border: none;
  border: 0.15em solid white;
  margin-top: 1em;
  height: auto;
}

方案2：用背景色模拟水平线 #

彻底避开浏览器对<hr>的默认边框处理，通过设置高度和背景色实现效果：

hr {
  width: 90vw;
  border: none;
  height: 0.15em;
  background-color: white;
  margin-top: 1em;
}

内容的提问来源于stack exchange，提问作者Phönix 64