调试环境: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 {
width: 270px;
height: 129px;
margin-top: 130px;
}
#searchBox {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
height: 40px;
width: 521px;
border: 1px solid #A8A8A8;
padding: 9px 7px;
font-size: 16px;
border-right: 0;
}
#searchButton {
width: 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,还是说规范如此。