CSS虚线边框渲染问题

Question

我看到一个2px虚线边框的渲染问题,类似于CSS中的相邻列中的CSS虚线边框问题,在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整除(因为它在您的示例中是动态的).