为什么圆形分隔线在 Firefox 中看起来很糟糕，而在 Chrome 中看起来很正常？-解网

问：

此问题是从超级用户迁移而来的，因为它可以在 Stack Overflow 上得到回答。上个月迁移。

我只是试图在Firefox中制作一个圆形分隔线，它看起来很糟糕。下面是简单的代码：

<html>
<style>
hr.rounded {
  border-top: 15px solid #bbb;
  border-radius: 8px;
  width: 50%;
  margin: 0 auto;
}
</style>
<body>
<hr class="rounded">
</body>
</html>

这是一个 jsfiddle：https://jsfiddle.net/mnfq9bu2/

更奇怪的是，它在 Chrome 中看起来非常正常。有谁知道这是怎么回事？谢谢。

谷歌浏览器 Firefox HTML CSS

评论

1赞 music2myear 10/4/2023

您能否在各种浏览器中包含圆形分隔线的屏幕截图，并指出它不正确或不受欢迎的地方？另外，这个问题可能属于 StackOverflow。不，不要在那里转发。给我们一点时间，我们很可能会让社区成员投票自动将其发送到那里。

0赞 Bravo 10/4/2023

老实说，我认为Firefox实际上显示了CSS中编写的内容，,,,对其进行更改以使其在两者中看起来都不错。border-block: 7px solid #bbb; border-inline: 1px solid #bbb;

0赞 Bravo 10/4/2023

想想你的CSS是做什么的......它放置一个 15 像素的顶部边框并设置边框半径......底部边框不存在（或者 HR 中可能为 1px，不确定）如何在 0/1 像素边框上放置 8 像素半径？在我看来，Chrome是错误的

0赞 Bravo 10/4/2023

实际上添加之前会修复它border:solid #bbb 1px;border-top

答：

2赞 A Haworth 10/4/2023 #1

Firefox似乎在做正确的事情 - 只对顶部边框进行四舍五入。

为了在浏览器之间获得一致的外观，您可以完全放弃使用边框，而是使用高度为 15px 的 hr 正文并删除默认边框。

<style>
  hr.rounded {
    border-radius: 8px;
    width: 50%;
    margin: 0 auto;
    height: 15px;
    background: #bbb;
    border: solid transparent 0px;
  }
</style>
<html>

<body>
  <hr class="rounded">
</body>

</html>

注意：建议使用此方法，而不是尝试将顶部和底部之间的边框分开等替代方法，因为系统可能难以正确显示部分 CSS 像素。

上一个：启用触摸模拟会将元素向右移动

下一个：如何在我的页面上找到源或流氓角色？[关闭]