如果HTML“按钮”有什么一样的盒子模型？ [英] Should HTML "buttons" have the same box-model as everything else?
问题描述
引用按钮元素和输入元素与类型 按钮，我碰到一个行为我认为是一个错误（在Firefox和Chrome的最近发布的版本）。但是考虑到表单元素通常是什么是我认为是w3规则的异常，我认为我会在假设我是对的之前请求验证。
Referring to both the button element and the input element with a type of button, I ran across a behavior I think is a bug (in recent releases of both Firefox and Chrome). But given how form elements are often exceptions to what I think are w3 rules, I thought I would ask for verification before assuming I am right.
行为是：标准模式，当我向这样的元素添加边框时，边框出现在元素的宽度内。如果我手动设置 box-sizing 为 content-box （使用供应商前缀） ，但是当 box-sizing 保留为其默认时，不是 content-box 。 这是一个jsfiddle示例。如果你不想去jsfiddle，这里是源代码：
The behavior is this: In standards-mode when I add a border to such an element, the border appears inside the width of the element. If I manually set the box-sizing to content-box (using vendor prefixes), the behavior does what I expect, but when the box-sizing is left as its default it is not content-box. Here's a jsfiddle example. If you don't want to go to jsfiddle, here's the source code:
<!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>
这是正确的行为还是我偶然遇到了错误？
Is this correct behavior, or have I stumbled on a bug?
推荐答案
显然，这个错误已经报告给Chrome和Firefox。漏洞是，在这两种情况下，这些元素在其浏览器样式表中设置了初始值 box-sizing：padding-box 。所以它在技术上不是一个默认值（initial！= default）。但是，将这些元素还原为 box-sizing：content-box 的唯一方法是使用专用浏览器扩展 content-box ，所以没有任何真正的CSS兼容的方式来做到这一点。对于CSS 2.1不存在框大小，并且专有浏览器扩展不是有效的CSS 3。
Apparently this bug has already been reported to Chrome and Firefox. The loophole is that in both cases these elements have an initial value of box-sizing: padding-box set in their browser stylesheets. So it's not technically a default value (initial != default). However, the only way to revert these elements back to box-sizing: content-box is using proprietary browser extensions for content-box, so there is not any truly CSS compliant way to do this. box-sizing doesn't exist for CSS 2.1, and proprietary browser extensions are not valid CSS 3.
这篇关于如果HTML“按钮”有什么一样的盒子模型？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
