< button>填充/宽度问题 [英] <button> padding / width problem

问题描述

我使用< button> 在表单中发出讯息要求。我还设置了< button> （我需要）。 a.button a.button 来创建一些JS东西）。

I'm using <button> to make a post request in a form. I also styled a a.button exactly like the <button> (I need the a.button to make some JS stuff).

按钮有一些填充，固定的高度。当我指定的按钮的宽度/他们都看起来一样。但是当我向< button> 添加宽度时，它忽略了填充。

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.

在Chrome，Firefox和Opera，所以我想它不是一个渲染故障。还有与< input type =submit/>

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" />

相同的问题这里是基本的CSS： / p>

Here is the basic 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;
}

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>

小提琴： 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).

推荐答案

很奇怪，对于输入元素有一个 box-sizing：border-box; 规则，因此padding包含在width ...

Very weird, I've seen my Chrome has a box-sizing: border-box; rule for input elements, so padding is included in width...

所以为了避免只是指定 box-sizing：content-box; （可能需要一些前缀）。

So to avoid that just specify box-sizing: content-box; (some prefix can be necessary).

这篇关于< button>填充/宽度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！