div.innerHTML = ""; // 从头来
div.style.width = div.style.paddingLeft = "1px";
body = document.createElement("body");
body.style.width = 0;
body.style.height = 0;
body.style.border = 0;
body.style.margin = 0; // 全部设置为0
body.appendChild(div);
document.documentElement.insertBefore(body, document.documentElement.firstChild);
support.boxModel = div.offsetWidth === 2;
// 这个时候div嵌套在body下。而body长宽高，边框和margin都是0。所以div的偏移应该就是它自己的paddingLeft+width。如果不对，就说明盒模式不对。
然后值得注意的是事件的冒泡，注释中提到的技术参考文章链接已经失效。请自己搜索"Detecting event support without browser sniffing"
复制代码 代码如下:
// attachEvent是IE的，所以这里实际上只检查了IE，其他浏览器都是前面设置的默认值。
if(div.attachEvent) {
for(i = {
submit: 1,
change: 1
focusin: 1
}) {
eventName = "on" + i;
isSupported = (eventName in div);
if(!isSupported) {
div.setAttribute(eventName, "return;");
isSupported = (typeof div[eventName] === "function");
}
support[i + "Bubbles"] = isSupported;
}
}
PS: 浏览器检测是一个很纠结，很细节的任务。这个笔记慢慢完善中……
18:30补充：经过IE9的测试，以上大部分IE相关问题都已经不存在。以下是IE9+Win7的测试结果：
复制代码 代码如下:
$.support
{
boxModel: true,
changeBubbles: true,
checkClone: true,
checkOn: true,
cssFloat: true,
deleteExpando: true,
hrefNormalized: true,
htmlSerialize: true,
leadingWhitespace: true,
noCloneEvent: false,
opacity: true,
optSelected: false,
parentNode: true,
scriptEval: true,
style: true,
submitBubbles: true,
tbody: true
}
您可能感兴趣的文章: