javascript - Firefox 和 IE 之间的窗口和 div 宽度有什么不同

Question

我有一个使用滚动 div 来显示表格信息的网页。调整窗口大小时(以及页面加载时)，显示居中，div 的滚动条通过设置其宽度定位到页面右侧。由于某种原因，firefox 下的行为与 IE 不同。 IE 按预期定位/调整 div 的大小，但 firefox 似乎将其设置得太宽，以至于当窗口客户端宽度达到约 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 宽度调整得更宽，滚动条开始消失。我不知道为什么会这样....

请注意，据我所知，getWindowWidth() 应该是跨浏览器兼容的，但我不太确定 findLPos()...。也许 Firefox 的 DOM 中有一个额外的对象或其他东西，它正在改变结果？ ？

Answer 1

根据维基百科，您正在处理“one of the best-known software bugs in a popular implementation of Cascading Style Sheets (CSS) ”。我推荐 Element dimensions和 CSS Object Model View页面 Quirksmode.org .

此外:我认为您会发现 Safari 和 Opera 在大多数情况下的行为与 Firefox 相似。解决这些问题的更兼容的方法是测试 MSIE 并为其创建异常(exception)，而不是相反。