CSS虚线边框渲染问题

Question

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

这是一个示例：

垂直线末尾有相同的问题，但它不在图片中。

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

Answer 1

如果宽度不能被border-width整除，则会出现此问题。

这有效： 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整除（因为它在您的示例中是动态的）。

Answer 2

你能把它放在一个较小的容器div中，隐藏溢出吗？