边框底部虚线在 Chrome 的开始/结束处有实线答案

【问题标题】：border-bottom dotted has solid line at start/end in Chrome边框底部虚线在 Chrome 的开始/结束处有实线
【发布时间】：2020-12-17 03:56:38
【问题描述】：

我创建了一个小提琴来说明这一点：https://jsfiddle.net/9tu8n4y5/

标记非常简单，因为它应该看起来像一条虚线来分隔内容位：

.dot {
    border-bottom: dotted 2px #022169;
}

<div class="dot"></div>

在 Firefox 55.0.3 中，这看起来和我期望的一样：

但是，在 Chrome 61.0.3163.91 中，它的开头和结尾有一条奇怪的“实线”：

更接近：

有人知道为什么会这样吗？我猜这是一个浏览器特有的问题，不能用 CSS 来改变？

我使用的是 27" 5k Retina iMac。但是我的第二台显示器是非 Retina 屏幕，结果是一样的。

Safari 10.0.3 提供与 Firefox 相同的结果。

编辑（发布后）- 报告给 Chromium Bugs 团队，https://bugs.chromium.org/p/chromium/issues/detail?id=766977

【问题讨论】：

是的，这是特定于浏览器的问题。如果你使用 4px 边框，那么问题就解决了。
好的，但显然这会改变点的大小......这不是我想要的。当我想要 2px 时，我不想使用 4px 的东西......这不是一个解决方案。
是的，我知道这不是解决方案，但我只是解释一下。
好的，谢谢。顺便说一句，它也不适用于 3px。
如果你想使用图像，那么我有一个解决方案。

标签： css google-chrome firefox

【解决方案1】：

我没有在 Retina 上测试过这个解决方案，但是您可以使用半径值来精确/接近您想要的。这就是我处理这个错误的方式：

.border-bug {
  border-bottom: 2px dotted red;
}

.no-border-bug {
   border-bottom: 2px dotted red;
   border-left: 2px solid transparent;
   border-top: 1px solid transparent;
   border-radius: 4px 1px 3px 3px;
}

<div class="border-bug">
Bug Bug Bug.
</div>
<br>
<div class="no-border-bug">
Almost no bug.
</div>

这个错误似乎已经存在很久了。

【讨论】：

谢谢。我已将其报告给 Chromium 错误跟踪器，并且有人正在调查它；很长一段时间都是这样。我已经在 Retina 显示器上测试了您的解决方案，它看起来不错，但“缺少”一些左/右边框。这确实是谷歌必须解决的浏览器错误 - 我认为没有任何 CSS 或前端代码可以修复它。

【解决方案2】：

嗨，刚刚找到了一个解决方法：将 Css 属性 border-collapse: separate; 添加到表中，它会正常工作。

【讨论】：

如果您在单词周围使用反引号，您可以将条目格式化为代码
好的，谢谢，我会这样做