CSS点边框渲染问题 [英] CSS dotted border render issue

问题描述

我看到一个2px虚线边框的渲染问题，类似于

解决方案

如果宽度不能被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整除（因为它在你的例子中是动态的）。

I'm seeing a rendering issue for a 2px dotted border similar to CSS dotted border issue in adjacent columns in a table rendered as dash in Chrome but on desktop Safari and Chrome. I tried several widths and it happens in all of them

This is a sample:

the vertical line ending has the same issue but it's out of the picture.

Sample: http://jsfiddle.net/bcdQQ/

解决方案

This issue happens if the width is not divisible by the border-width.

This works: http://jsfiddle.net/bcdQQ/5/ (i made it a little bit bigger, for better sight)

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

So, the only possibility to catch this issue, would be a javascript solution, which corrects the width of the div, so it is divisible by the border-width (cause it is dynamically in your example).

这篇关于CSS点边框渲染问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！