Question

我正在使用<button>在表单中发布帖子请求。我还设置了一个a.button，与<button>完全相同（我需要a.button来制作一些JS内容。）

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

我在Chrome，Firefox和Opera中遇到此问题，所以我猜这不是渲染错误。 <input type="submit" />

也是同样的问题

这是基本的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/

为什么浏览器忽略填充的任何建议？（使用高度时的顶部和底部/使用宽度时的左右）。

Answer 1

非常奇怪，我看到我的Chrome对输入元素有box-sizing: border-box;规则，所以填充包含在宽度中...

所以为了避免这种情况，只需指定box-sizing: content-box;（可能需要一些前缀）。

Answer 2

它对我来说很好，所以它可能是样式表冲突问题。尝试使用！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;
}

希望这有帮助。

迈克尔。

<button>填充/宽度问题</button>

2 个答案: