爲<input type ='submit'>

添加了用於填充高度/寬度的CSS填充如果已經詢問此問題，我表示歉意，但我找不到完全相同的問題。正如W3schools所說，高度屬性不包括填充，邊框或邊距！(link)。所以這裏有一個簡單的樣式聲明：爲<input type ='submit'>

input { 
    width:180px; 
    height:18px; 
    padding:7px; 
    border:1px solid black; 
}

這裏的HTML：

<input type='text' name='text' value='194px by 32px' /><br /> 
<input type='submit' name='button' id='button' value='180px by 18px' />

的文本字段是194px由32PX如預期，但提交按鈕是180像素18像素。顯然，我可以通過兩倍的填充來增加按鈕的高度&，但我想了解爲什麼會有差異。我在這裏做了一個jsfiddle：http://jsfiddle.net/RRf5A/。謝謝你的幫助。僅供參考，我已經試過<button>而不是輸入提交，並且display:inline-block。

來源

2011-05-21 yitwail

Firefox和Safari通常不會在標準按鈕上顯示填充，所以如果您使用其中一種瀏覽器，則不會應用填充。我相信IE瀏覽器確實應用了一些填充效果（不知道它是否可以完美運行） – 2011-05-21 03:23:09

@jqueryrocks，jsfiddle在IE7，IE8，Safari和Firefox中看起來相同，所以它至少不是IE問題;-) – yitwail 2011-05-21 03:58:50

並非所有的w3schools都說得對。爲什麼？在這裏看到[w3fools]（http://w3fools.com/）幫助你進一步瞭解高度/寬度。看到它[這裏]（http://www.w3.org/TR/CSS21/box.html） – ace 2011-05-21 07:43:19

您可以通過添加box-sizing: content-box;來輸入提交類型的元素來解決此問題。我不會詳細介紹自己，我只會寄給你http://www.quirksmode.org/css/box.html。然而，目前它並不是全部支持的，所以你可能會發現它更適合跨瀏覽器兼容性來專門聲明提交按鈕的不同高度和填充。

來源

2011-05-21 08:11:01 iamnotoriginal

感謝您的交易鏈接。 – yitwail 2011-05-21 22:38:30

爲<input type ='submit'>

回答

相關問題