J'ai eu un problème avec l'utilisation de Wwidth offsetwidth sur différents navigateurs. Cette différence de résultats provoque des mises en page étrangères. J'ai créé un très petit exemple qui affiche ce que je vois.
HTML < / strong> js Réinitialiser Erik Meyer's RESET CSS Quand J'exécute ceci sur chrome, safari et opéra la valeur renvoyée pour la largeur de décalage de la cellule 1 est de 72. Lorsque je l'exécute sur Firefox et IE9-10, la valeur renvoyée est de 77. J'étais sous l'impression que j'étais sous l'impression que était la meilleure façon de calculer la largeur d'un élément comprenant un rembourrage et une frontière. Y a-t-il une solution de navigateur croisée qui retournera toujours le même résultat? J'ai essayé d'utiliser JQuery mais les résultats étaient encore plus déroutants. EDIT
Parce que tout le monde recommande à la ouherwidth, j'ai fait un JSBIN pour cela aussi. Les résultats diffèrent toujours entre les navigateurs. Chrome retourne 36; IE9-10 et Firefox Retour 39.
4 Réponses :
offsetwidth code> n'est pas fiable navigateur croisé. Je recommanderais d'utiliser JQuery's OuterWidth () code> à la place. $("#your-element").outerWidth();
Vous pouvez utiliser JQuery's .ouverwidth () si vous avez besoin de Obtenez une largeur calculée au navigateur croisée, y compris des choses comme des frontières et la marge.
Puisque vous avez marqué le poteau avec jQuery, je suppose qu'une solution de jQuery est acceptable. Quel est le problème avec outerwidth () code> ?
Par exemple: P>
$(function() {
$('button').click(function() {
var the_width = $('#tbl tr:eq(0) td:eq(0)').outerWidth();
$('#c1offWidth').html(the_width);
});
});
Les solutions JQuery sont définitivement acceptées! Malheureusement, cette démo a renvoyé 36 Chrome mais 39 en IE. Cela ne semble pas résoudre le problème
Il retourne 39px dans Firefox, aussi. Ce n'est pas un problème avec la fonction - il renvoie la valeur correcte. Le "problème" est la façon dont les différents navigateurs rendent les éléments par défaut. Par exemple, si vous spécifiez une largeur fixe pour #tbl , les résultats sont normalisés> jsfiddle.net/h2ugz/2
Une partie du problème était que toutes les fonctions extérieures et offsetwidth ont arrondi les valeurs renvoyées. Cela a été atténué en définissant une largeur sur la table comme vous l'aviez recommandé.
Que diriez-vous d'une réponse non-jQuery, de la curiosité. J'apparaisse que vous connaissez peut-être un moyen @benm.
Le problème réel dans votre exemple était dans ce que différents navigateurs utilisent différentes polices par défaut pour le rendu. Et la taille de la boîte pour vos cellules est définie par le contenu. Si vous définissez une largeur définitive pour l'élément (comme indiqué correctement dans l'un des commentaires), vous obtiendrez le résultat défini et égal.
PS: impossible de poster des commentaires ...
Actuellement, je pense que cela devrait être la réponse acceptée! Toutes les autres réponses «Blabla-Use-Use-JQuery» ne traitent de rien. Comme si JQuery retournerait une autre largeur - que ce n'est pas, bien sûr.
Ils ridicules de tant de programmeurs ignorants utilisant JQuery comme Lire Doh quand nous devrions utiliser de la sculpture argile! Utilisez JS Native JS PAS une bibliothèque de ressources de ressources comme JQuery. Faites vos tests JSPERF!
Ah oui, l'ancienne technique de fichier globale 1. avacweb.com/17860.js . Grand modèle pour ralentir vos utilisateurs.