为<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'>

回答

相关问题