Попытка соответствовать высоты линии без единиц измерения У меня проблема с overflow: auto и элементами анкера.Рассмотрим следующую простую страницу:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>test</title>
</head>
<body style="font-family: arial; font-size: 12px; line-height: 1;">
<div id="wrapper" style="overflow: auto; background-color: #FFCCCC;">
<p>Blah blah blah</p>
<a href="#" style="text-decoration: none;">Test</a>
</div>
</body>
</html>
Сочетание font-size: 12px и line-height: 1 должно сделать высоту абзаца и привязки (без отступов, полей и рамок) 12 пикселей.
Таким образом, общая высота страницы должна составлять: 4 * 12 = 48 пикселей (2 элемента плюс 2 * 12 пикселей поля для абзаца).Однако почти каждый браузер «резервирует» два или три дополнительных пикселя для подчеркивания привязки (хотя я использовал text-decoration: none).Firefox 7, Chrome 14 и Opera 11.51 все демонстрируют это поведение, на удивление IE9 работает отлично:).
С их соответствующими панелями инструментов разработчика вы можете видеть, что все браузеры соглашаются с тем, что элемент div имеет высоту 48 пикселей,но только IE считает, что высота якоря составляет 12 пикселей.Другие браузеры говорят 14 или 15 пикселей, в результате чего появляется полоса прокрутки.
При удалении overflow: auto это не вариант (в моем случае div генерируется каркасом, а иногда просто содержит плавающие элементы, поэтомуПереполнение используется для расширения div, чтобы инкапсулировать его дочерние элементы), есть ли правильное решение для этого?т.е. лучше, чем давать якорь font-size: 15px или line-height: 1.2 или что-то.
Ура, Мули