Firefox中的填充問題？

我目前遇到了一個問題，那就是Firefox正在取走1-2像素左右的div文本。在寫太多之前，我會顯示一些照片併發布代碼，以便您知道我的意思。這可能就是Firefox呈現的方式。 Anywho代碼和圖片如下：Firefox中的填充問題？

的Chrome/Safari瀏覽器/ IE屏幕：

enter image description here

火狐屏幕：

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是渲染這樣，如何解決這一問題？

來源

2011-02-03 Ryan

添加行高到您的CSS。我也建議你添加速記屬性。

這裏是一個可行的解決方案（舊/新comparsion）：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; 
}

來源

2011-02-03 21:10:29 gearsdigital

那麼，你可能有其他的CSS，但在代碼中列出，你永遠不會設置你的行高，所以你依靠瀏覽器的默認值。嘗試設置特定的行高。

來源

2011-02-03 21:06:10

不，我已經試過行高，但FF仍像1px的區別，它如此怪異的呈現。 – Ryan 2011-02-03 21:11:02

設置行高爲我固定。 – duncmc 2011-02-03 21:16:16

Firefox中的填充問題？

回答

相關問題