CSS <button> 填充/宽度问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6790512/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
<button> padding / width problem
提问by js-coder
I'm using <button>to make a post request in a form. I also styled a a.buttonexactly like the <button>(I need the a.buttonto make some JS stuff).
我正在使用<button>表单发出帖子请求。我还设计了一个a.button完全类似于<button>（我需要a.button制作一些 JS 东西）的样式。
The button has some padding, a fixed height. When I do specify the width of the button / a they both look the same. But when I add width to the <button>it ignores the padding.
按钮有一些填充，一个固定的高度。当我指定按钮的宽度 / a 时，它们看起来都一样。但是当我向<button>它添加宽度时，它会忽略填充。
I'm having this problem in Chrome, Firefox and Opera, so I guess it's not a rendering fault. Also same issue with <input type="submit" />
我在 Chrome、Firefox 和 Opera 中遇到了这个问题，所以我想这不是渲染错误。也有同样的问题<input type="submit" />
Here is the basic CSS:
这是基本的CSS：
.button, button {
margin: 0;
display: inline-block;
border: 0;
text-decoration: none;
cursor: pointer;
color: black;
background: #ddd;
font: 12px Verdana;
padding: 40px; /* 40px, so you can see that it won't be rendered with width */
text-align: center;
}
The HTML:
HTML：
<a href="#" class="button">Some text</a>
<button>Some text</button>
<!-- Works fine till here -->
<br /><br />
<a href="#" class="button" style="width:200px">Some text</a>
<button style="width:200px">Some text</button>
Fiddle: http://jsfiddle.net/9dtnz/
小提琴：http: //jsfiddle.net/9dtnz/
Any suggestions why the browsers are ignoring the padding? (top and bottom when using height / left and right when using width).
有什么建议为什么浏览器会忽略填充？（使用高度时的顶部和底部/使用宽度时的左右）。
回答by MatTheCat
Very weird, I've seen my Chrome has a box-sizing: border-box;rule for input elements, so padding is included in width...
很奇怪，我已经看到我的 Chromebox-sizing: border-box;对输入元素有一个规则，所以填充包含在宽度中......
So to avoid that just specify box-sizing: content-box;(some prefix can be necessary).
因此，为了避免这种情况，只需指定box-sizing: content-box;（可能需要一些前缀）。
回答by Michael Giovanni Pumo
It looks fine to me, so it might be a style sheet conflict issue. Try using !important to override whatever it may be and that could solve your problem.
对我来说看起来不错，所以它可能是样式表冲突问题。尝试使用 !important 覆盖它可能是的任何内容，这可以解决您的问题。
.button, button {
margin: 0;
display: inline-block;
border: 0;
text-decoration: none;
cursor: pointer;
color: black;
background: #ddd;
font: 12px Verdana;
padding: 40px!important; /* 40px, so you can see that it won't be rendered with width */
text-align: center;
}
Hope this helps.
希望这可以帮助。
Michael.
迈克尔。
