I recently encountered an issue with the button element and the input element when using a type of button. In both Firefox and Chrome, I noticed a behavior that seems like a bug in recent releases. However, as form elements often have exceptions to W3 rules, I wanted to confirm before jumping to conclusions.
The specific behavior is this: When adding a border to these elements in standards-mode, the border appears inside the width of the element. If I manually set the box-sizing property to content-box (using vendor prefixes), the behavior aligns with my expectations. But leaving the box-sizing at its default state, which is not content-box, results in unexpected outcomes. You can view an example on this jsfiddle link. Alternatively, here is 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;
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>
Can you confirm if this behavior is correct or if it indicates a bug?