Дизайн сайта, над которым я работаю, призывает к подчеркиванию, сжатому вдоль нижней части текста, буквально касающемуся базовой линии.Я выполняю абсолютное позиционирование псевдоэлемента after с границей для достижения этой цели, и я вижу странное несоответствие между высотой блока в Mac Chrome и PC Chrome.
Обратите внимание на ссылку «Посетить» в правом верхнем углу.Это скриншот Mac Chrome, и он должен выглядеть так.Инструменты разработчика утверждают, что высота поля тега <a> равна 30px.
Посмотрите, что происходит с тем же сайтом в PC Chrome.Как видите, под текстом и подчеркиванием есть небольшой разрыв, потому что PC Chrome считает, что этот же самый точный элемент имеет высоту блока 22px.
CSS для подчеркивания:
a {
position: relative;
&::after {
content: '';
position: absolute;
top: 1em;
width: 100%;
left: 0;
border-bottom: 4px solid;
}
}
Как вы можете видеть, 1em, который позиционирует подчеркивание, находится в другом месте в двух разных ОС.
Что здесь происходит??
Вот обзор того, что я проверил:
- Я экспортировал файлы woff / woff2 с помощью FontSquirrel с включенной опцией «Соответствие X-высоты» на «100%»
- В обоих браузерах установлено масштабирование 100%
- Расчетный размер шрифта элемента равен 22px наоба.
- Расчетная высота строки элемента составляет 22 пикселя для обоих.
- Оба элемента имеют
box-sizing: content-box.