Про border-style: dotted
По интернету уже довольно давно ходит картинка, показывающая как разные браузеры обрабатывают толстые границы с точками. С тех пор ничего не изменилось. Но, как выяснилось, чтобы поймать баги, достаточно границы в один пиксель! Во время создания сайта у меня был код, похожий на этот:
<!DOCTYPE html> <html><head><title>Test page</title> <style> hr { border: 0; width: 20px; height: 1px; border-bottom: 1px black dotted; display: inline-block; } div.test { width: 10px; height: 10px; border-left: 1px black dotted; border-bottom: 1px black dotted; } </style> </head><body><hr><div class="test"></div></body></html>
Посмотрим, как ведут себя браузеры (изображения я увеличил):

Firefox и IE отрисовывают всё как надо. А вот с остальными дела обстоят хуже:
Chrome добавляет лишнюю точку к прямой линии. Если поиграться с размерами «уголка», то двойные точки будут и там. Поразительно, браузер может запускать трёхмерные игры, но не может нормально нарисовать линию с точками. Аналогично и в Safari — видимо, баг в движке Webkit. Возникает только если размер элемента в пикселях — чётное число. Для исправления предлагается добавить к элементу лишние отступы или границы, но это бесполезно, если размеры непостоянные.
У «Оперы» же расстояние между точками совершенно не такое, как у остальных. Вообще, в стандарте это не оговорено, но другие браузеры всё же стремятся к тому, чтобы там был один пиксель. В «уголке» расстояние и вовсе огромное. Двойная точка тоже присутствует, но связи с чётностью расстояния я не выявил.
Самое простое решение — вообще отказаться встроенного свойства и использовать фоновые изображения. Чтобы лишний раз не дёргать сервер, картинки можно закодировать в Base64 и поместить прямо в CSS. Таблица стилей в этом случае выглядит вот так:
hr { border: 0; width: 20px; height: 1px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAYAAAD0In+KAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAA9JREFUGFdjYGBg+A8EDAAN+wP9OcJBJQAAAABJRU5ErkJggg==); display: inline-block; } div.test { width: 10px; height: 10px; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAIAAAACUFjqAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAABhJREFUKFNj+I8XMAABlIkNDHfd2Mn//wFkNg//vXu49gAAAABJRU5ErkJggg==); background-repeat: no-repeat; }
У такого решения есть недостатки, легко менять размеры «уголка» уже не получится, а линии будут слегка размытые на Retina дисплеях — для них нужно отдельно отдавать изображения с удвоенным разрешением.
Комментариев нет