css - CSS虚线边框渲染问题

我看到类似于CSS dotted border issue in adjacent columns in a table rendered as dash in Chrome的2px点缀边框的渲染问题，但在桌面Safari和Chrome上。我尝试了几种宽度，所有的宽度都发生了

这是一个示例：



垂直线结尾也有同样的问题，但超出了图片范围。

样品：
http://jsfiddle.net/bcdQQ/

最佳答案

如果宽度不能被边框宽度整除，则会发生此问题。

这有效：
http://jsfiddle.net/bcdQQ/5/（为了使视野更好，我将其放大了一点）

#prodpre {
    border-bottom: #555 5px dotted;
    height: 20px;
    margin: 0px 0px 2px 0px;
    padding-bottom: 10px;
    width: 505px;
}

因此，解决此问题的唯一可能性是一个JavaScript解决方案，它可以纠正div的宽度，因此可以通过border-width整除（因为在您的示例中它是动态的）。