如何正確呈現Firefox中文本字段旁邊的按鈕？

<html> 
    <head> 
     <style type="text/css"> 
      #theInput 
      { 
       border:solid 1px gray; 
       height:20px; 
      } 
      #theButton 
      { 
       border:solid 1px gray; 
       height:20px; 
      } 

     </style> 
    </head> 
    <body> 
     <input type="text" id="theInput"><input type="button" value=" Go " id="theButton"> 
    <body> 
</html>

在Firefox中渲染前一個按鈕時，該按鈕比文本字段高出約1px。如何解決這個問題？ 沒有指定文檔類型，高度在Chrome中是完美的，甚至令人驚訝的是IE6，但Firefox中沒有？如何正確呈現Firefox中文本字段旁邊的按鈕？

來源

2010-11-24 Babiker

如果您使用最近的DOCTYPE，例如HTML 4.01或XHTML 1.0或1.1，然後在FF，Chrome和IE 8中持續使用，則按鈕實際上比文本框短2個像素。在FF中，Firebug實際上報告的框是18px。所以，我建議使用符合標準的DOCTYPE，也是造型的按鈕的2px比文本框高：

http://jsfiddle.net/DPbsA/8/

這裏是一個與橙色框的左側，與高= 20像素，和邊界= 1px的頂部和底部，使得盒的22px的總「視覺高度」：

http://jsfiddle.net/DPbsA/12/

您可能會希望使用符合標準的DOCTYPE，因爲如果沒有它們，FF/Chrome和IE之間的盒子模型可能會大不相同。

來源

2010-11-24 04:55:50

即使它在現代的DOCTYPE背景聽起來有些不可思議：造型按鈕比文本框高2px以使它們同樣高，這是正確的答案。投了票。 – Bazzz 2010-11-24 07:17:55

它總是很好有標準的文檔類型，因爲如果你沒有指定文檔類型，IE回退到怪癖模式。

添加填充底，它將與文本框對齊

讓我知道如果你需要任何東西

#theButton 
       { 
        border:solid 1px gray; 
        height:20px; 
        padding-bottom:2px; 


}

來源

2010-11-24 05:16:47 kobe

如何正確呈現Firefox中文本字段旁邊的按鈕？

回答

相關問題