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;
}

Answer 2

您是否尝试将font-size的{{1}}设置为#moodInner值而不是px值..计算像素的ems可能会导致默认的行高不同浏览器的px差异

你不能有半个像素，所以当进行em转换并且结果相当于一个部分像素时，浏览器必须“舍入”并且它们全部不同

Div填充Mozilla和其他所有人之间的差异

2 个答案: