为什么<hr/>有一个奇怪的黑色顶部边框？

Question

我在角度弯曲的divs和行中放了一个<hr>：

<div layout="column" flex>
<div><hr style="border-color: green; height: 10px; background-color: green;"/></div>
// other divs
</div>

给我以下结果

我检查了那个div 并派生了color: black属性，但我用color: green覆盖了它(到处都是color:green(，但结果仍然相同。为什么我有奇怪的左边和上黑(深绿色(边框？

Answer 1

打开检查器(右键单击元素并选择检查(，您将看到用户代理样式表(浏览器应用于元素的默认样式(：

hr {
display: block;
unicode-bidi: isolate;
-webkit-margin-before: 0.5em;
-webkit-margin-after: 0.5em;
-webkit-margin-start: auto;
-webkit-margin-end: auto;
overflow: hidden;
border-style: inset;
border-width: 1px;
}

请注意浏览器应用的border-style: inset和border-width: 1px默认样式。

很多人使用某种重置.css或规范化.css(谷歌这些东西(来删除许多可能不需要的默认浏览器样式。

Answer 2

保持简单：

<hr style=" border: 0;  height: 1px;  background: green;"/>

放置您喜欢的任何高度，在将其用于不同功能之前，您必须将 hr 元素的基本边框定义为0。