Я вижу проблему с рендерингом для 2px пунктирной границы, похожей на Проблема с пунктирной линией CSS в соседних столбцах в таблице, отображаемой как тире в Chrome, но на рабочем столе Safari и Chrome. Я попробовал несколько ширин, и это происходит во всех них.
Это пример:
Вертикальная линия заканчивается с той же проблемой, но она не соответствует изображению.
Пример: http://jsfiddle.net/bcdQQ/
Эта проблема возникает, если ширина не делится на ширину рамки.
Это работает: 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, поэтому оно делится на ширину границы (потому что это динамически в вашем примере).
Вы могли бы поместить его в контейнер меньшего контейнера с переполнением?