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

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

Answer 2

好的，我发现了问题。似乎是firefox在其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 3

由于Quirks模式，只要您不包含有效的doctype，就不能指望一致的结果。去添加一个（HTML 4.01 Transitional很好），然后告诉我们它是否仍然存在。

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

Answer 4

在你的getWindowWidth（）函数中，无论何时你获取某个东西的宽度，而不是这个：

windowWidth = document.documentElement.clientWidth;

试试这个

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

Answer 5

有助于优化部分代码的详细信息：

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中发布此代码的用户）

firefox和IE之间的窗口和div宽度有什么不同

5 个答案: