调试环境：Chrome 37
按照标准的W3C盒子模型，height属性应该是元素内容的高度，如下图所示：
所有现代浏览器都应该满足W3C盒子模型的标准，但最近笔者在自己定制一个本地的百度主页时，发现对于input元素，各现代浏览器遵循的是老式的IE盒子模型。
Html代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="baiduMini.ico" />
<title>百度一下，你就知道</title>
<style type="text/css">
* {
font-family: "Helvetica","Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei","华文细黑","STHeiti";
}
body {
text-align: center;
margin-left: auto;
margin-right: auto;
}
img {
270px;
height: 129px;
margin-top: 130px;
}
#searchBox {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
height: 40px;
521px;
border: 1px solid #A8A8A8;
padding: 9px 7px;
font-size: 16px;
border-right: 0;
}
#searchButton {
102px;
height: 40px;
color: white;
background-color: #3388ff;
border: 0;
padding: 0;
margin: 0;
font-size: 16px;
}
</style>
</head>
<body>
<img src="baidulogo.png" alt="Logo not found">
<form id="bdfm" target="_blank" name="bdfm" method="get" action="http://www.baidu.com/s">
<table>
<input id="searchBox" type="text" id="search1" name="word" autocomplete="off"/>
<input id="searchButton" type="submit" value="百度一下" />
</table>
</form>
</body>
</html>仿照百度主页的样式，我把搜索框的样式设置为：
height: 20px;
padding: 9px 7px;
border: 1px solid #A8A8A8;
但是实际的显示结果却和预想的不一样：
查看元素，发现其height属性是0，border和padding加起来一共是20px，恰好是预设的height值。
于是猜测，这是不是遵循IE老式版本的盒子模型。
于是将height改成40px，果真如此，显示正常，如下图所示。
在IE11，Opera，FF，Safari中显示结果基本是一样的。
这说明：在上述浏览器中，input元素的height属性是遵循老式IE盒子模型的，不知道这算不算是一个BUG，还是说规范如此。