css - Mozilla 和其他人之间的 Div Padding 差异

Question

我有一个带有背景图像的 div 元素，我试图在其中垂直对齐一些文本。

文本在 IE、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>

Answer 1

我会尝试完全删除#moodInner，将 if 的内容放入#moodOuter 并在其上设置行高(仅当您的文本为 1 行时才有效)。行高应与高度相同。这将使您的文本在#moodOuter 中垂直居中。 (虽然我不确定它是否能解决您的问题。)

#moodOuter {
  height: 36px
  line-height: 36px;
}