浏览器的盒子模型分为两类,一类为标准的w3c盒子模型,另一类为IE盒子模型,两者区别为在Width和Height这两个属性值中是否包含padding和border的值,w3c盒子模型不包含,IE盒子模型则包含,而在jQuery 中,可以通过$.support.boxModel
对象返回的值,检测浏览器是否属于标准的w3c盒子模型。
例如,根据页面的特征,并通过$.support.boxModel
属性的返回值,显示当前浏览器是否属于标准的w3c盒子模型,如下图所示:
在浏览器中显示的效果:
从图中可以看出,由于打开的页面属于标准的w3c盒子模型,因此,在调用$.support.boxModel
属性时,返回true值。
<html> <head> <title>检测是否是盒子模型</title> <link href="style.css" rel="stylesheet" type="text/css" /> <script src="http://www.imooc.com/data/jquery-1.8.2.min.js" type="text/javascript"></script> </head> <body> <div id="divtest"> <div class="title"> <span class="fl">检测是否是盒子模型</span> </div> <div class="content"></div> </div> <script type="text/javascript"> $(function () { var strTmp = "您打开的页面是:"; if (?) { //是W3C盒子模型 strTmp += "W3C盒子模型"; } else { //是IE盒子模型 strTmp += "IE盒子模型"; } $(".content").html(strTmp); }); </script> </body> </html>
#divtest { width: 282px; } #divtest .title { padding: 8px; background-color: Blue; color: #fff; height: 23px; line-height: 23px; font-size: 15px; font-weight: bold; } #divtest .content { padding: 8px; background-color: #fff; font-size: 13px; } .fl { float: left; } .fr { float: right; }