Ce qui est différent avec les largeurs de fenêtre et de div entre firefox et IE

Question

J'ai une page Web qui utilise un div de défilement pour afficher les informations de la table. Lorsque la fenêtre est redimensionnée (et aussi au chargement de la page), l'affichage est centré et la barre de défilement de la div positionnée à droite de la page en définissant sa largeur. Pour une raison quelconque, le comportement est différent sous firefox que IE. IE positionne/divise le div comme prévu, mais firefox semble le rendre trop large, de sorte que la barre de défilement commence à disparaître lorsque la largeur du client fenêtre atteint environ 800px. J'utilise les méthodes suivantes pour définir la position et la taille:

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

Notez que j'ai découpé autre code qui fixe la hauteur, et d'autres parties non pertinentes. La page entière peut être vue here. Si vous allez sur le lien dans IE et Firefox, redimensionner la largeur jusqu'à ce que "800" s'affiche dans la boîte verte en haut à droite, et redimensionner la hauteur jusqu'à ce que la barre de défilement à droite est activée, vous pouvez voir le problème. Si vous redimensionnez ensuite la largeur IE, la barre de défilement reste, mais si vous redimensionnez la largeur firefox plus large, la barre de défilement commence à disparaître. Je ne sais pas pourquoi cela se produit ....

Notez que AFAIK, getWindowWidth() devrait être compatible avec tous les navigateurs, mais je ne suis pas si sûr de findLPos() .... Peut-être qu'il y a un objet supplémentaire dans le DOM de Firefox ou quelque chose qui change le résultat?

Answer 1

Vous avez affaire à "one of the best-known software bugs in a popular implementation of Cascading Style Sheets (CSS)" selon Wikipedia. Je recommande les pages Element dimensions et CSS Object Model View sur Quirksmode.org.

Aussi: je pense que vous trouverez que Safari et Opera se comportent comme Firefox dans la plupart des cas. Une approche plus compatible pour contourner ces problèmes est de tester et de faire des exceptions pour MSIE au lieu de l'inverse.

Answer 2

Tant que vous n'incluez pas de doctype valide, vous ne pouvez pas vous attendre à des résultats cohérents, en raison du mode Quirks. Allez en ajouter un (HTML 4.01 Transitional est très bien), puis dites-nous si cela se produit encore.

Voir aussi http://en.wikipedia.org/wiki/Quirks_mode.

Answer 3

Dans votre fonction getWindowWidth(), chaque fois que vous prenez la largeur de quelque chose, au lieu de cela:

windowWidth = document.documentElement.clientWidth; 

essayer cette

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

Answer 4

Un détail pour optimiser une partie de votre code:

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

(cavalier est un utilisateur qui a posté ce code dans Eksperten.dk)

Answer 5

Ok, j'ai trouvé le problème. Semble être que firefox n'inclut pas la valeur de style.paddingLeft dans son paramètre style.width, alors que IE le fait, ainsi le div se terminait exactement style.paddingLeft trop large. Si, par exemple, style.paddingLeft est 8, la valeur style.width d'IE serait 8 de plus que FireFox - et donc l'inverse lors de la définition de la valeur, pour FireFox je devais soustraire la valeur style.paddingLeft

Code modifié avec:

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