摘要:the compatible width and height on Timeline
之前使用timeline元件時,發現在ie下,點開event的bubble後,不能選取bubble上的文字。
應該是說一選取,bubble就消失,這種情況是滑鼠點到bubble以外的地方才會引發的事件,所以很有可能是位置定位錯誤。
後來好不容易才找到有人在討論這相關的議題,如下:
<script>
SimileAjax.DOM.getEventPageCoordinates = function(evt) {
if (SimileAjax.Platform.browser.isIE) {
if (document.compatMode == "CSS1Compat") {
return {
x: evt.clientX + document.body.parentNode.scrollLeft,
y: evt.clientY + document.body.parentNode.scrollTop
};
} else {
return {
x: evt.clientX + document.body.scrollLeft,
y: evt.clientY + document.body.scrollTop
};
}
} else {
return {
x: evt.pageX,
y: evt.pageY
};
}
};
</script>
SimileAjax.DOM.getEventPageCoordinates = function(evt) {
if (SimileAjax.Platform.browser.isIE) {
if (document.compatMode == "CSS1Compat") {
return {
x: evt.clientX + document.body.parentNode.scrollLeft,
y: evt.clientY + document.body.parentNode.scrollTop
};
} else {
return {
x: evt.clientX + document.body.scrollLeft,
y: evt.clientY + document.body.scrollTop
};
}
} else {
return {
x: evt.pageX,
y: evt.pageY
};
}
};
</script>
主要是由compatMode來判斷是否相容!
IE一般默認為Quirks Mode(compatMode=BackCompat)而不是Standards Mode(compatMode=CSS1Compat ,可相容)
compatMode的介紹:
document.compatMode 為 BackCompat 時,width = document.body.clientWidth
document.compatMode 為 CSS1Compat 時, width = document.documentElement.clientWidth
EX:
if (document.compatMode == \"BackCompat\") {
cWidth = document.body.clientWidth;
cHeight = document.body.clientHeight;
sWidth = document.body.scrollWidth;
sHeight = document.body.scrollHeight;
sLeft = document.body.scrollLeft;
sTop = document.body.scrollTop;
}
else { //document.compatMode == \"CSS1Compat\"
cWidth = document.documentElement.clientWidth;
cHeight = document.documentElement.clientHeight;
sWidth = document.documentElement.scrollWidth;
sHeight = document.documentElement.scrollHeight;
sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;
sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
}
cWidth = document.body.clientWidth;
cHeight = document.body.clientHeight;
sWidth = document.body.scrollWidth;
sHeight = document.body.scrollHeight;
sLeft = document.body.scrollLeft;
sTop = document.body.scrollTop;
}
else { //document.compatMode == \"CSS1Compat\"
cWidth = document.documentElement.clientWidth;
cHeight = document.documentElement.clientHeight;
sWidth = document.documentElement.scrollWidth;
sHeight = document.documentElement.scrollHeight;
sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;
sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
}
P.S. document.body.parentNode.scrollLeft 與 document.documentElement.scrollLeft 相同!
documentElement是指document在DOM中根,也就是body的上一個節點(因為body在html的下一層嘛)!
Q: 怎麼設定網頁文件相容?
Ans: 加入標準DTD!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
P.S. Quirks Mode補充:
http://www.aoao.org.cn/blog/2007/01/browser-mode/