Firefox中的填充问题？答案

【问题标题】：Padding issue in Firefox?Firefox中的填充问题？
【发布时间】：2011-06-20 23:18:09
【问题描述】：

我目前有一个问题，即 Firefox 会在 div 中的某些文本周围去除 1-2 像素的填充。在写太多之前，我将展示一些图片并发布代码，以便您了解我的意思。这可能只是 Firefox 呈现的方式。 Anywho代码和图片如下：

Chrome/Safari/IE 屏幕：

火狐屏幕：

这里是代码：

html页面：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
    <head>
        <title>Test Page One</title>
        <LINK REL=StyleSheet HREF="stylesheets/test.css" TYPE="text/css" MEDIA=screen>      
    </head>
    <body>
        <div class="single_label blue_label">Test<div class="remove"></div></div>
    </body>
</html>

CSS：

.single_label{ 
  float: left; 
  padding-right: 5px; 
  padding-left: 7px; 
  height: 14px; 
  color: black; 
  font-size: 10px; 
  font-family: Helvetica, Verdana, Arial, sans-serif; 
  text-align: left; 
  width: 74px; 
  vertical-align: bottom
}

.blue_label {
  background-color: #3acbff;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

那么谁能告诉我为什么 Firefox 会这样渲染以及如何解决这个问题？

【问题讨论】：

标签： html css firefox padding

【解决方案1】：

好吧，您可能有其他 CSS，但在列出的代码中，您从不设置行高，因此您依赖浏览器默认设置。尝试设置特定的行高。

【讨论】：

不，我已经尝试过行高，但 FF 仍然以 1px 的差异呈现，太奇怪了。
设置 line-height 为我修复了它。
好吧，我的浏览器一定搞砸了，因为我改变了行高，你仍然可以看到浏览器之间有 1-2 像素的差异。 . .
我知道这似乎是一个愚蠢的错误，但我一直在尝试修复它一段时间，但没有任何效果。 @乍得

【解决方案2】：

为你的 CSS 添加行高。我还建议您添加速记属性。

这是一个可行的解决方案（旧/新比较）：http://jsfiddle.net/dncxK/1/

.single_label {
    color:#000;
    float:left;
    font:10px/16px Helvetica, Verdana, Arial, sans-serif;
    padding:0 5px 0 7px;
    text-align:left;
    vertical-align:bottom;
    width:74px;
    height:14px;
}

【讨论】：

嘿，我想说这已经解决了问题，但它没有。不管我到目前为止做了什么改变，FF 坚持让它变得与众不同。当我尝试您的示例时，FF 将其呈现在中心，然后其他浏览器将其呈现在几个像素以下。谢谢，虽然我真的很感谢你的帮助：D @gearsdigital
你的回答对我帮助最大，所以你知道了 :) @gearsdigital