Question

我有一个底边虚线的元素：

border-bottom: #303030 2px dashed !important;

在Chrome中，它很好地呈现为这样，所有的破折号都具有相同的长度：

但是，Safari的行为有所不同。第一个和最后一个破折号在侧面被切除：

这里是可复制的最小Codepen：https://codepen.io/anon/pen/XBJjJP

我尝试用背景图像实现虚线效果，这给我在Safari中完全一样的问题。

你们有解决方案，让Safari以与Chrome浏览器相同的方式渲染短划线吗？

Answer 1

好吧，我发现了一个（hacky）解决方案，它也可以在Safari中工作：使用完全透明的边框保留空间，然后在绘制实际边框的元素下方添加背景图片：

ans =

    1.0000    2.0000    3.1000    4.0000    5.0000
    0.8000    1.0000    1.3000    1.0000    1.1000

我需要将确切的破折号宽度（在这种情况下为11px）调整为具体元素的宽度。因此，我怀疑这种解决方案在响应式设计方案中是否能很好地工作，但至少对我来说足够了。