【发布时间】：2011-07-26 12:53:27
【问题描述】：
我有一个带有背景图像的 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>
【问题讨论】：
-
您是否使用任何类型的 css 重置来擦除任何默认浏览器样式？
-
我什至不知道这意味着什么所以很可能不，我没有这样做 =)
-
每个浏览器都有一些与之关联的默认样式（主要是边距和填充），以使非样式内容可读。但是每个浏览器的默认值是不同的，所以重置样式可以确保你的背景和浏览器窗口之间没有填充。默认值还可以将一些最小样式应用于其他块元素。但是看看你是如何定义填充的，这可能不是问题。 Css Reset 在 Css 的开头添加它，但如果你已经设置了样式，请谨慎使用它可能会搞砸一些事情。
-
我刚刚查找了一个 CSS 重置，是的，我正在这样做 (* { margin:0;padding:0;}。还有其他想法吗？
-
问题可能是字体大小的ems。 Firefox 与其他浏览器不同，会呈现部分像素字体大小；例如，Firefox 实际上会尝试找出 8.4px 字体大小的样子，而不是像其他浏览器那样四舍五入到 8px。我会首先尝试将您的字体大小设置为硬像素值，以确保这不是问题。