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 宽度调整得更宽，滚动条就会开始消失。我不知道为什么会这样......

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

Answer 1

由于 Quirks 模式，只要您不包含有效的文档类型，您就不能期望得到一致的结果。去添加一个（HTML 4.01 Transitional 很好），然后让我们知道它是否仍然存在。

另见http://en.wikipedia.org/wiki/Quirks_mode。

Answer 2

在您的 getWindowWidth() 函数中，每当您抓取某物的宽度时，而不是这样：

windowWidth = document.documentElement.clientWidth;

试试这个

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

Answer 3

有助于优化部分代码的细节：

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}
}

（jumper 是在 Eksperten.dk 中发布此代码的用户）

Answer 4

好的，我发现了问题。似乎火狐在其 style.width 设置中不包含 style.paddingLeft 值，而 IE 包含，因此 div 最终完全是 style.paddingLeft 太宽。也就是说，例如，如果 style.paddingLeft 为 8，则 IE 的 style.width 值将比 FireFox 的值大 8 - 因此设置值时相反，对于 FireFox，我需要减去 style.paddingLeft 值

修改后的代码：

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

Answer 5

根据维基百科，您正在处理“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 并为其设置例外，而不是相反。