Проблема с усеченной границей CSS

Я вижу проблему с рендерингом для 2px пунктирной границы, похожей на Проблема с пунктирной линией CSS в соседних столбцах в таблице, отображаемой как тире в Chrome, но на рабочем столе Safari и Chrome. Я попробовал несколько ширин, и это происходит во всех них.

Это пример:

sample

Вертикальная линия заканчивается с той же проблемой, но она не соответствует изображению.

Пример: http://jsfiddle.net/bcdQQ/

Ответы

Ответ 1

Эта проблема возникает, если ширина не делится на ширину рамки.

Это работает: 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, поэтому оно делится на ширину границы (потому что это динамически в вашем примере).

Ответ 2

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