Что отличается с шириной окна и div между firefox и IE - PullRequest
Новая
       27

Что отличается с шириной окна и div между firefox и IE

2 голосов
/ 24 октября 2008

У меня есть веб-страница, которая использует прокручиваемый div для отображения информации таблицы. При изменении размера окна (а также при загрузке страницы) дисплей центрируется, а полоса прокрутки элемента div располагается справа от страницы путем установки его ширины. По некоторым причинам, поведение под Firefox отличается от IE. IE позиционирует / изменяет размер div, как и ожидалось, но Firefox, кажется, делает его слишком широким, так что полоса прокрутки начинает исчезать, когда ширина окна клиента достигает около 800 пикселей. Я использую следующие методы для установки позиции и размера: 

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

Обратите внимание, что я вырезал другой код, который устанавливает высоту, и другие не относящиеся к делу части. Полную страницу можно увидеть здесь . Если вы перейдете по ссылке в IE и Firefox, измените размер по ширине до тех пор, пока в зеленом поле вверху справа не отобразится «800», и измените размер по высоте, пока не будет включена полоса прокрутки справа, вы можете увидеть проблему. Если вы затем измените размер IE, полоса прокрутки останется, но если вы измените размер Firefox на более широкий, полоса прокрутки начнет исчезать. Я в недоумении относительно того, почему это происходит ....

Обратите внимание, что AFAIK, getWindowWidth () должен быть кросс-браузерно-совместимым, но я не очень уверен насчет findLPos () .... возможно, есть дополнительный объект в DOM Firefox или что-то еще, что меняет результат?

Ответы [ 5 ]

2 голосов
/ 24 октября 2008

Вы имеете дело с " одной из самых известных программных ошибок в популярной реализации каскадных таблиц стилей (CSS) " согласно Википедии. Я рекомендую Размеры элемента и Вид объектной модели CSS страниц на Quirksmode.org .

Также: я думаю, вы обнаружите, что Safari и Opera ведут себя как Firefox в большинстве случаев. Более совместимым подходом к решению этих проблем является тестирование и создание исключений для MSIE, а не наоборот.

1 голос
/ 24 октября 2008

Хорошо, я нашел проблему. Похоже, что Firefox не включает значение style.paddingLeft в свою настройку style.width, в то время как в IE это делается, поэтому div заканчивал тем, что style.paddingLeft получился слишком широким. То есть, если, например, style.paddingLeft равен 8, значение style.width в IE будет на 8 больше, чем в FireFox - и, следовательно, при установке значения в обратном порядке, для FireFox мне нужно было вычесть значение style.paddingLeft

Модифицированный код с: 

  if (__isFireFox){
    bdydiv.style.width = winWdth - bdydivLft - rghtMarg;
  } else {
    bdydiv.style.width = winWdth - bdydivLft;
  }
0 голосов
/ 24 октября 2008

В вашей функции getWindowWidth (), когда вы берете ширину чего-либо, вместо этого: 

windowWidth = document.documentElement.clientWidth;

попробуйте это 

windowWidth = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth);
0 голосов
/ 24 октября 2008

Подробно, чтобы помочь оптимизировать часть вашего кода: 

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)

0 голосов
/ 24 октября 2008

Пока вы не включите действительный тип документа, вы не можете ожидать последовательных результатов из-за режима Quirks. Идите и добавьте один (HTML 4.01 Transitional в порядке), а затем дайте нам знать, если это все еще происходит.

Также см. http://en.wikipedia.org/wiki/Quirks_mode.

...