Mozilla 和其他人之间的 Div Padding 差异
我有一个带有背景图像的 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>
I have a div element with a background image that I am vertically trying to align some text in.
The text pads itself one way in IE, Chrome and Safari but one pixel differently in Firefox 3 / 4.
It's one pixel lower in Firefox and is driving me nuts. Normally it wouldn't be that big of a deal but I am vertically centering text in a caption bubble so I need it to be perfect.
Anyone know why it's different in Firefox and whether there is a workaround? Something like a -moz-padding-top would be super even though I know that doesn't exist.
The padding that's giving me issues is set below in .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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我会尝试完全删除 #moodInner，将 if 的内容放入 #moodOuter 并在其上设置行高（仅当您的文本为 1 行时才有效）。行高应与高度相同。这将使您的文本在#moodOuter 内垂直居中。 （虽然我不确定它是否能解决你的问题。）
I would try removing #moodInner altogether, placing the content of if into #moodOuter and setting a line height on it (only works if your text is 1 line). The line-height should be the same as the height. This will vertically center your text inside #moodOuter. (although i am not sure if it will fix your problem.)
您是否尝试过将
#moodInner的font-size设置为px值而不是em值。将 em 计算为像素可能会导致浏览器之间的默认行高相差 px您不能有半个像素，因此在进行 em 转换且结果等于部分像素时，浏览器必须“舍入”他们的周围都不同
Have you tried setting the
font-sizeof#moodInnerto apxvalue instead of anemone.. calculating ems to pixels could be causing the default line-height to differ by a px across browsersYou can't have half a pixel, so when making an em conversion and the outcome equates to a partial pixel, the browsers have to "round" and they all round differently