Это тестовое изображение показывает, как сильно отличающийся текст Safari помещается внутри окна против Firefox (Safari 5.0.5 и Firefox 5.0.1 для Mac OS X X 10.6.7). Обратите внимание, как "S" для sans-serif закрывается до верхней части окна Firefox, а не Safari. Разница, похоже, меняется в зависимости от используемого шрифта, где некоторые из них даже последовательно отображаются.
Я читал люди, говорящие, что это из-за проблем округления между font-size и line-height (и фиксируется установкой меньшей высоты, чем размер), но Я думаю, что это опровергнуто моим примером, когда sans-serif/helvetica в Firefox всегда выравнивает вершину в поле.
Мне кажется, что Safari получает больше прав, чем Firefox, т.е. текст, как правило, больше вокруг средней линии.
Есть ли хороший способ сделать их более последовательными? Моя цель - это только браузеры, совместимые со стандартами.
- NB1: Это не имеет ничего общего с
vertical-align. - NB2: Я исследовал аналогичную проблему в прошлом без каких-либо вполне удовлетворительных результатов.
Мой тестовый код: http://jsbin.com/omaboc
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
body {
font-size: 50px;
line-height: 1em;
}
div {
background: #b5e260;
margin-bottom: 5px;
}
</style>
</head>
<body>
<div style="font-family: sans-serif">Some text @ this box</div>
<div style="font-family: serif">Some text @ this box</div>
<div style="font-family: arial">Some text @ this box</div>
<div style="font-family: helvetica">Some text @ this box</div>
<div style="font-family: courier">Some text @ this box</div>
<div style="font-family: georgia">Some text @ this box</div>
</body>
</html>
