2
Я пытаюсь применить двойную границу к элементу заголовка. Скрипка выше работает как ожидается во всех браузерах, кроме Chrome. В Chrome (с использованием версии 37.0.2062.120 на Windows 7 здесь) нижняя граница в некоторых случаях находится на 2 пикселя от верхней границы, а в других случаях - на 1 пиксель. Я не понимаю этого несоответствия. Используя веб-инспектор, я вижу некоторые странные десятичные высоты для элементов, поэтому я предполагаю, что это некоторая ошибка округления. Откуда берутся эти десятичные высоты?Граница, применяемая стилем CSS, не отображается постоянно только в Chrome
Вот скрипка:
http://jsfiddle.net/7qshmLbv/2/
и вот стиль CSS я использую:
h2 {
color: #023D62;
text-transform: uppercase;
font-size: 11px;
font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
border-bottom: 2px solid #7F7F7F;
padding-bottom: 3px;
vertical-align: top;
position: relative;
margin-bottom: 20px;
}
h2:before {
background: none;
border-bottom: 1px solid #7f7f7f;
content: "";
display: block;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: -4px;
pointer-events: none;
}
Может кто-нибудь, пожалуйста, помогите? Благодарю.