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.
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?
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.