Question

通过给宽度不同的数值（因此可见宽度相等）来解决这个问题很容易，但这只会让我感到烦恼。

以下是代码：

<!DOCTYPE html>
<style>
.box {
    width: 6em;
    margin: 1em auto;
    padding: 1em;
    font-family:sans-serif;
    font-size: 1em;
    font-weight: bold;
    border: none;
    display: block;
    text-decoration:inherit;
    text-align:center;
    color:inherit;
    background-color:blue;
}
</style>
<html>
<body>
<a class="box">Anchor</a>
<input type="submit" class="box" value="Input" />
<button type="submit" class="box">Button</button>
</body>
</html>

和jsfiddle：http://jsfiddle.net/TRmtp/

Answer 1

通过添加规则，您可以拥有相同的宽度：

box-sizing: border-box;

Updated JS Fiddle demo

问题在于浏览器分配宽度的方式，特别是width是否包含填充，以及边框，宽度。使用box-sizing: border-box强制（兼容）浏览器将这些宽度包含在整个指定宽度内，而不管“默认”模型。

参考文献：

box-sizing (MDN)。
box-width (W3C)。

样式元素的输入[type =“submit”]'和'button'具有与其他元素不同的宽度

1 个答案: