Различия между Паддингом и Мозиллой - PullRequest
Новая
       16

Различия между Паддингом и Мозиллой

2 голосов
/ 31 марта 2011

У меня есть элемент div с фоновым изображением, в котором я пытаюсь выровнять текст по вертикали.

Текст дополняет себя в Internet Explorer, Chrome и Safari в одном направлении, но в Firefox 3/4 - на один пиксель по-разному.

Это на один пиксель ниже в Firefox и сводит меня с ума. Обычно это не так уж важно, но я вертикально центрирую текст в пузыре заголовка, поэтому мне нужно, чтобы он был идеальным.

Кто-нибудь знает, почему в Firefox все по-другому и есть ли обходной путь? Что-то вроде -moz-padding-top было бы супер, хотя я знаю, что этого не существует.

Заполнение, которое вызывает у меня проблемы, указано ниже в .moodInner 

#content .profilePic
{
    float:right;
    width:230px;
    padding:10px 0 0 0;
    text-align:center;
}
#content .profilePic #moodOuter
{
    height:36px;
    margin-bottom:2px;
    width:100%;
    background:url('/_assets/img/mood-bubble-profile.gif') no-repeat center;
}   
#content .profilePic #moodInner
{
    padding:4px 0 0 0;
    font-size:0.85em;
}
<div class="profilePic">
     <div id="moodOuter" style="display:
            <?php if ($mood == "") { ?>none;<?php } else { ?>block;<?php } ?>">
            <div id="moodInner"><?php echo trim($mood); ?></div>
     </div>
</div>

Ответы [ 2 ]

3 голосов
/ 31 марта 2011

Я бы попытался полностью удалить #moodInner, поместив содержимое if в #moodOuter и установив для него высоту строки (работает, только если ваш текст состоит из 1 строки). Высота строки должна совпадать с высотой. Это будет вертикально центрировать ваш текст внутри #moodOuter. (хотя я не уверен, что это решит вашу проблему.) 

#moodOuter {
  height: 36px
  line-height: 36px;
}
1 голос
/ 31 марта 2011

Вы пытались установить font-size из #moodInner в значение px вместо em единица .. вычисление ems в пикселях может привести к тому, что высота строки по умолчанию будет различаться на px в разных браузерах

У вас не может быть половины пикселя, поэтому при преобразовании em, а результат равен частичному пикселю, браузеры должны «округлить», и все они округляются по-разному

...