CSS bordure en pointillés rendre problème

Question

Je vois un problème de rendu pour une bordure en pointillés 2px similaire à CSS dotted border issue in adjacent columns in a table rendered as dash in Chrome mais sur le bureau Safari et Chrome. J'ai essayé plusieurs largeurs et il arrive dans tous les

Voici un exemple:

la fin de la ligne verticale a le même problème, mais il est hors de l'image.

Exemple: http://jsfiddle.net/bcdQQ/

Answer 1

Ce problème se produit si la largeur n'est pas divisible par la largeur de la bordure.

Cela fonctionne: http://jsfiddle.net/bcdQQ/5/ (je l'ai fait un peu plus grand, pour une meilleure vue)

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

Ainsi, la seule possibilité de prendre cette question, serait une solution javascript, qui corrige la largeur le div, donc il est divisible par la largeur de la bordure (car il est dynamiquement dans votre exemple).

Answer 2

pourriez-vous le mettre dans un conteneur div plus petit avec trop-plein caché?