Question

我目前有一个问题，即Firefox在一些文本中占用了1-2个像素的填充。在写太多之前，我会展示一些照片并发布代码，以便你知道我的意思。它可能只是Firefox呈现的方式。任何代码和图片如下：

Chrome / Safari / Ie屏幕：

enter image description here

Firefox屏幕：

enter image description here

以下是代码：

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会像这样渲染以及如何解决这个问题吗？

Answer 1

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

Answer 2

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

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

enter image description here

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

Firefox中的填充问题？

2 个答案: