Firefox和IE之間的窗口和div寬度有什麼不同

Question

我有一個使用滾動div顯示錶信息的網頁。當窗口調整大小時（以及在頁面加載時），顯示屏居中，div的滾動條通過設置寬度位於頁面的右側。由於某種原因，Firefox下的行爲與IE不同。 IE的位置/大小的預期，但火狐似乎使它太寬，使窗口客戶端寬度達到約800px時，滾動條開始消失。我用下面的方法來設置的位置和大小：

function getWindowWidth() { 
    var windowWidth = 0; 
    if (typeof(window.innerWidth) == 'number') { 
    windowWidth=window.innerWidth; 
    } 
    else { 
    if (document.documentElement && document.documentElement.clientWidth) { 
     windowWidth=document.documentElement.clientWidth ; 
    } 
    else { 
     if (document.body && document.body.clientWidth) { 
     windowWidth=document.body.clientWidth; 
     } 
    } 
    } 
    return windowWidth; 
} 

function findLPos(obj) { 
    var curleft = 0; 
    if (obj.offsetParent) { 
    curleft = obj.offsetLeft 
    while (obj = obj.offsetParent) { 
     curleft += obj.offsetLeft 
    } 
    } 
    return curleft; 
} 

var bdydiv; 
var coldiv; 

document.body.style.overflow="hidden"; 
window.onload=resizeDivs; 
window.onresize=resizeDivs; 

function resizeDivs(){ 
    bdydiv=document.getElementById('bdydiv'); 
    coldiv=document.getElementById('coldiv'); 
    var winWdth=getWindowWidth(); 
    var rghtMarg = 0; 
    var colHdrTbl=document.getElementById('colHdrTbl'); 
    rghtMarg = parseInt((winWdth - 766)/2) - 8; 
    rghtMarg = (rghtMarg > 0 ? rghtMarg : 0); 
    coldiv.style.paddingLeft = rghtMarg + "px"; 
    bdydiv.style.paddingLeft = rghtMarg + "px"; 
    var bdydivLft=findLPos(bdydiv); 
    if ((winWdth - bdydivLft) >= 1){ 
    bdydiv.style.width = winWdth - bdydivLft; 
    coldiv.style.width = bdydiv.style.width; 
    } 
    syncScroll(); 
} 

function syncScroll(){ 
    if(coldiv.scrollLeft>=0){ 
    coldiv.scrollLeft=bdydiv.scrollLeft; 
    } 
} 

請注意，我切出的其他代碼這臺高度，以及其他不相關的部分。整個頁面可以看到here。如果您轉到IE和Firefox中的鏈接，調整寬度直到「800」顯示在右上角的綠色框中，並調整高度直到右側的滾動條被啓用，您可以看到問題所在。如果您隨後調整IE寬度的大小，則滾動條會保留，但如果您調整Firefox的寬度，則滾動條將開始消失。我不知道爲什麼會發生這種情況......

請注意，AFAIK，getWindowWidth（）應該是跨瀏覽器兼容的，但我不太確定findLPos（）....也許在Firefox的DOM中有一個額外的對象或者其他東西，這正在改變結果？

Answer 1

根據維基百科，您正在處理「one of the best-known software bugs in a popular implementation of Cascading Style Sheets (CSS)」。我建議Quirksmode.org上的Element dimensions和CSS Object Model View頁。

另外：我認爲你會發現在大多數情況下，Safari和Opera的行爲類似於Firefox。解決這些問題的更加兼容的方法是測試MSIE而不是其他方法。

Answer 2

只要你沒有包含有效的文檔類型，由於怪癖模式，你不能期待一致的結果。去添加一個（HTML 4.01過渡是好的），然後讓我們知道它是否仍然存在。

另請參閱http://en.wikipedia.org/wiki/Quirks_mode。

Answer 3

在你getWindowWidth（）函數，只要你抓住的不是這個東西寬度：

windowWidth = document.documentElement.clientWidth; 

試試這個

windowWidth = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth); 

Answer 4

一個細節，以幫助優化你的一些代碼：

function getPos(elm) {//jumper 
    for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent); 
    return {x:zx,y:zy} 
} 

（跳線是在Eksperten.dk中發佈此代碼的用戶）

Answer 5

好吧，我發現了這個問題。似乎是firefox不包括其style.widthding設置的style.paddingLeft值，而IE瀏覽器，因此該div結束了完全style.paddingLeft太寬。也就是說，如果style.paddingLeft爲8，那麼IE的style.width值將比FireFox的值多8，因此在設置該值時反過來，對於我需要減去style.paddingLeft值的FireFox

修改後的代碼與：

if (__isFireFox){ 
    bdydiv.style.width = winWdth - bdydivLft - rghtMarg; 
    } else { 
    bdydiv.style.width = winWdth - bdydivLft; 
    }