CSS - 比提交的文本輸入顯示的要短按鈕

Question

我的CSS如下：

input,textarea 
{ 
    font-family: Arial, Sans-Serif; 
    font-size: 15px; 
    color:#779EC0; 
    display: block; 
    padding: 4px; 
    margin-top:10px; 
    border: solid 1px #85b1de; 
    background-color: #EDF2F7; 
    width:100%; 
} 

我試圖同時輸出一個文本輸入和一個提交輸入。 然而，提交輸入顯示比文本輸入短几個像素..顯然沒有理由。

我已經使用這個搜索引擎沒有運氣。

任何想法？

Answer 1

那麼，答案就藏在現代瀏覽器的默認樣式表。這個問題與CSS的盒子模型有關。

基本上，input [type =「text」]，textarea，通常大多數其他元素都有一個標準的盒子尺寸模式（'content-box'）。輸入[type =「submit」]使用邊界框大小模式，該模式由較少的元素使用。

這行CSS添加到您的上述樣式聲明：

box-sizing:content-box; 

這將覆蓋瀏覽器默認的樣式表，並設置所有這些元素的內容盒，這將解決您的大小問題。

---

我加入了小提琴，並意識到，火狐仍然需要-moz前綴：

box-sizing:content-box; 
-moz-box-sizing:content-box; 

http://jsfiddle.net/vXFDN/2/

Answer 2

你可以試試這個

input[type=submit] { 
    //your style for button type submit 
} 

Answer 3

我想這是因爲文本區域可以有一個滾動條，而不同的瀏覽器解釋這個不同。

我會建議簡單地用一個單獨的固定寬度的文字區域：

input,textarea 
{ 
    font-family: Arial, Sans-Serif; 
    font-size: 15px; 
    color:#779EC0; 
    display: block; 
    padding: 4px; 
    margin-top:10px; 
    border: solid 1px #85b1de; 
    background-color: #EDF2F7; 
    width:100%; 
} 

textarea 
{ 
    width:98%; 
} 

見琴：

http://jsfiddle.net/Curt/VJTMF/1/