Дизайн сайту, на якому я працюю над викликами для підкреслення, звисся прямо внизу тексту, буквально торкаючись базової лінії. after псевдоелемент з прикордонним дном для досягнення цього, і я бачу дивне невідповідність між висотою вікна в Mac Chrome і PC Chrome.
Зверніть увагу на посилання "Візит" у верхньому правому куті. Цей скріншот - це Mac Chrome, і він має виглядати так <a> тег 30px.
Подивіться, що відбувається для одного і того ж сайту в Chrome 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-Height" увімкнено на "100%"
- Обидва веб-переглядачі мають масштаб до 100%
- Розрахований розмір шрифту елемента становить 22px на обох.
- Розрахована висота рядка елемента становить 22px на обох.
- Обидва елементи мають
box-sizing: content-box.
Відповіді:
0 для відповіді № 1Якщо коробка модель дійсно є проблемою, ви можете встановити атрибут розміру коробки на вашому a і ::after елемент, щоб примусити послідовну візуалізацію коробки-моделі, а потім налаштувати ваші змінні за необхідності.
box-sizing: border-box