Пограничное отображение странно

Question

У меня есть страница, которая содержит таблицу.

У <tr> есть border-bottom: 1px dotted black;, но, как вы можете видеть на изображении ниже, они отображаются довольно странно. Кто-нибудь знает, почему это может быть?

Соответствующий CSS

.basket-item{ 
    border-bottom: 1px dotted black; 
    border-top: 1px dotted black; 
    padding: 10px 0; 
} 

.basket-item td:nth-of-type(2){ //included this as it seems to be the second td in every row 
    padding: 25px; 
    vertical-align: top; 
    text-align: left; 
} 

HTML структура является стандартной таблицы, <tr> «s имеют класс .basket-item

Заранее спасибо за любую помощь

Answer 1

Продление от комментариев:

Эта проблема, кажется, только/главным образом влияет на Chrome (или WebKit), и после некоторого неудачного судебного процесса, я наконец-то придумать с этим:

добавить

h4 { 
    margin-bottom: 1.5em; /* or whatever length that ends in an integer pixel */ 
} 

причиной этого является то, что вы указали

font-size: 14px; 

И Chrome имеет внутренний CSS, который выглядит как:

h4 { 
    -webkit-margin-before: 1.33em; /* works like margin-top */ 
    -webkit-margin-after: 1.33em; /* works like margin-bottom */ 
} 

Это делает число с плавающей точкой пикселя (14 * 1.33 = 18.62), и (возможно, с другими элементами ниже, особенно float: left элементов), Chrome, кажется, есть необходимость «рассчитать» оставшуюся высоту пространства для «placeholder» и, наконец, получить число с плавающей запятой, «очень близкое к 200px».

Наблюдение:

В моем Chrome, то <td> должен быть 250px высотой (включая padding). То, что <td> имеет padding: 25px, поэтому «внутренняя высота» должна быть 200px, но по умолчанию стиль, в инструменте разработчика, показывает, что <td> на самом деле 199.609375px height. Перезапись margin-bottomh4 на целое число «нормализованное» внутренняя высота назад до 200 пикселей.

Answer 2

Это очевидно, отображение таблицы; если вы измените свой td или ваш tr на другой дисплей (например, inline-block), он исчезнет, ​​но ваш макет сломан.

Это также, кажется, зависит от уровня масштабирования видового экрана: если масштабирование, вы можете сделать странные границы исчезают (как верхняя и нижняя границы): высоту tr и td переключателя от 250px до 251px иногда.

С таким количеством информации я не могу вывести другой параметр для изменения.

Если у вас нет реального решения, подумайте о том, чтобы изменить тип отображения, либо tr, либо td, и адаптируйте свой макет в соответствии с вашими требованиями.