Я сталкиваюсь с проблемой вертикального позиционирования с парой элементов на странице в Firefox 5. Когда я устанавливаю высоту строки для фрагмента текста и присваиваю ему равную высоту, он не центрируется вертикально так и должно быть. Вместо этого он придерживается top своей высоты строки.
Страница, о которой идет речь, находится здесь: http://www.tyndale.ca/~missiodei/
Вот два проблемных элемента вместе с их CSS. В обоих случаях текст выдвигается вверх в FF5, но отображается правильно (вертикально по центру в пределах высоты строки) в Chrome / Chromium.
ссылка на большой заголовок в баннере (#blogtitle a)
position:relative;
display:block;
margin:0;
padding:0;
color:#fff;
text-decoration:none;
letter-spacing:.1em;
font-family:"Palatino Linotype", Palatino, serif;
font-weight:bold;
opacity:0.6;
height:120px;
line-height:120px;
любая из заглавных букв, всплывающих в начале новых разделов основного текста (p.openingPar: first-letter)
font-size:3em;
font-weight:bold;
position:relative;
float:left;
height:48px;
color:#ccc;
line-height:48px;
margin-right:4px;
Вы можете не увидеть эти буквицы, если не посмотрите на страницу с помощью Chrome или Safari, поскольку большинство из них вообще не отображаются в FF. (Я не уверен, почему эти стили тоже не соблюдаются).
Наконец, было бы полезно узнать, является ли эта проблема уникальной для FF5 или у 3.6 и 4.0 такая же проблема. У меня нет старых версий FF для быстрого тестирования.
Заранее спасибо за помощь. Я запечатлел свою клавиатуру на лбу, ударив по ней головой!