Почему есть промежуток между линиями before и after?

Question

[Pavel Pavel]

Во всех браузерах кроме этой песочницы(почему-то, может потому что окно маленькое) одна и та же проблема - при очередном наведении(не каждый раз) остается промежуток в 1px между before и after. Заметил что это меняется при изменении слов в меню, т.е. на этот баг(?) влияет ширина меню или положение слова. Собственно вопрос - это баг браузеров или ошибка в коде? Замечал похожий баг: когда ставлю нижний border через псевдоэлемент(как в примере) в 1px, на некоторых высотах он отображается как 1px, а на некоторых(например если сделать отступ на 1px ниже) 2px.
https://jsfiddle.net/a6r3dgp9/13/

Comments

[Aetae]

Я воспроизвести на примере не смог, но скорее всего баг. В ослике такое вообще обычное дело, а вот ff и chrome вроде нормально с полупикселями работать должны.

Answer 1

[profesor08]

У тебя дробная часть пикселей откругляется. Имея эту информацию, ты можешь придумать решение, например увеличив длинную одной линии на 1.

Comments

[Pavel Pavel]

в принципе с нижним бордером так и делал, как в описании - менял ее высоту на 1. Можно было и тут догадаться, но не знал про это округление. Спасибо, помогло.
Т.е. если я буду делать подобные эффектики я обязательно должен делать такой "хак"? Чтобы ни у кого такого не было.

[profesor08]

Pavel Pavel, только если нужно, мне ни разу не понадобилось