the compatible width and height on Timeline

摘要: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>
 
主要是由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;
}
 
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/