Problema di rendering del bordo punteggiato CSS

Question

Vedo un problema di rendering per un bordo punteggiato di 2 px simile a CSS dotted border issue in adjacent columns in a table rendered as dash in Chrome ma su desktop Safari e Chrome. Ho provato diverse larghezze e succede in tutti

Questo è un esempio:

linea verticale finale ha lo stesso problema ma è fuori dal quadro.

Esempio: http://jsfiddle.net/bcdQQ/

Answer 1

Questo problema si verifica se la larghezza non è divisibile per il border-width.

Questo funziona: http://jsfiddle.net/bcdQQ/5/ (ho fatto un po 'più grande, per una migliore vista)

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

Quindi, l'unica possibilità per la cattura di questo problema, sarebbe una soluzione javascript, che corregge la larghezza di il div, quindi è divisibile per la larghezza del bordo (perché è dinamicamente nel tuo esempio).

Answer 2

potresti metterlo in un contenitore più piccolo con overflow nascosto?