参考两者button元素和input元素与一个type of button，我遇到了一个我认为是错误的行为（在 Firefox 和 Chrome 的最新版本中）。但考虑到表单元素通常是我认为的 w3 规则的例外，我想在假设我是对的之前我会要求验证。
行为是这样的：在标准模式下，当我向此类元素添加边框时，边框出现在元素的宽度内。如果我手动设置box-sizing to content-box（使用供应商前缀），该行为符合我的预期，但是当box-sizing保留为默认值它不是content-box. 这是一个 jsfiddle 示例。如果你不想去jsfiddle，这里是源代码：
<!doctype html>
<html>
<head>
<title>Broken box model?</title>
<style>
body {
padding: 30px;
background: brown;
}
div {
position: relative;
}
input {
background-color: #CCC;
font-family: Helvetica, Verdana, sans-serif; /* Yes, I know Helvetica and Verdana are dissimilar. I don't care. Arial sucks. */
font-size: 18px;
font-weight: bold;
color: white;
text-transform: uppercase;
border: 0;
width: 150px;
height: 90px;
margin: 4px;
}
input:hover {
margin: 0;
border: 4px solid white;
}
input:active {
margin: 0;
border: 4px solid white;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
</style>
</head>
<body>
<div>
<input type="button" value="I am a button" />
</div>
</body>
</html>
这是正确的行为，还是我偶然发现了一个错误？
显然这个错误已经报告给 Chrome 和 Firefox。漏洞在于，在这两种情况下，这些元素都有一个initial的价值box-sizing: padding-box在浏览器样式表中设置。因此从技术上讲它不是默认值（初始值！=默认值）。然而，将这些元素恢复到原来的唯一方法box-sizing: content-box正在使用专有的浏览器扩展content-box，因此没有任何真正符合 CSS 的方法可以做到这一点。 CSS 2.1 不存在 box-sizing，并且专有浏览器扩展不是有效的 CSS 3。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
