Про 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 дисплеях — для них нужно отдельно отдавать изображения с удвоенным разрешением.
Комментарии
Your site provided us with useful info to work on. You have done an impressive task and our entire community shall be thankful to you. https://Biznesnewss.com/obshhe...yj-podarok.html
And he actually ordered me dinner due to the fact that I stumbled upon it for him...
lol. So let me reword this.... Thank YOU for the meal!!
But yeah, thanks for spending the time to talk about this issue here on your
web page. https://Feromonia.Com.ua/porad...yakist-ta-stil/
you make running a blog glance easy. The overall glance of
your web site is fantastic, let alone the content! https://Fokus.com.ua/rizne/nai...togo-valentina/
it's pleasant content https://blique.com.ua/cholovic...shat-baiduzhym/
your website, how could i subscribe for a blog site?
The account helped me a acceptable deal. I had been a little bit acquainted of this your broadcast offered bright clear
idea https://Angela.ORG.Ua/2025/06/...livih-rechovin/
valuable data to us, keep it up. https://man-world.info/uk/zipp...y-ne-znaly.html
discussing over the internet. You actually know how to bring a problem to light and make it important.
More and more people really need to read this and understand this side of the story.
I was surprised that you are not more popular since you
most certainly have the gift. https://Poradnicya.com.ua/rizn...chno-zi-smakom/
I am a user of net therefore from now I am using net for content, thanks to web. https://expertly.com.ua/mikroi...ivayemo-pravdu/
weblog presents feature based posts. https://ukrpulse.org.ua/2024/n...o-vidnovlennya/
you wrote the book in it or something. I think that you could do with a few pics to drive the message home
a bit, but other than that, this is excellent blog.
A fantastic read. I'll definitely be back. https://Lady.Kyiv.ua/poradi/re...i-vidnovlennya/