CSS рендеринг пунктирной границы проблема

Question

Я вижу проблему с рендерингом для пунктирной границы в 2px, аналогичную Проблема с пунктирной границей в 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 (потому что это динамически в вашем примере).

Answer 2

не могли бы вы поместить его в меньший контейнерный контейнер со скрытым переполнением?