Question

我正在<hr>上使用此代码，以使其更适合我的网站。此代码可在chrome和任何其他基于chrome的浏览器上完全运行，但在 IE ， FireFox 等上无法使用。如何使其与 FireFox 和 safari 兼容（注意：我没有在 safari 上进行了测试）

.MyHr{
  width:20%;
  height: 0px;
  border-radius: 100px;
  border-width: 2px;
  border-color:var(--ThemeColor);
  border-style:solid;
  margin:2vh;
}

<hr class="MyHr" />

Answer 1

在Chrome和Edge中进行了测试

如果您的错误是Edge以<HR />元素居中，则可能是由于浏览器默认hr元素的样式\实现上的差异。（Chrome使用页边距，该页边距会被您的页边距设置取消，Edge似乎使用偏移量来做到这一点）

您可以应用float: left，在这两个浏览器上似乎都一样。

在此处提供了一个已实现示例的链接： https://codepen.io/Cnordbo/pen/OJJrwoG

否则，请更详细地说明您遇到的问题，并以Codepen / jsfiddle / Codesandbox之类的方式重现它。

<hr>元素css'在除chrome之外的其他浏览器上不起作用

1 个答案: