jQuery retourne différentes hauteurs pour les mêmes objets dans WebKit (chrome) et Firefox

Im perplexe par cette.

jQuery.hauteur() est de retour avec des valeurs différentes dans les navigateurs Firefox et Chrome. Mesurer les pixels sur l'écran indique que de les deux, Chrome semble être de déclaration de la valeur correcte, tandis que firefox soit un écart de 2 ou 3 pixels à chaque fois. Quelqu'un d'autre a rencontré ce problème?

J'ai essayé de l'accaparement de la hauteur à l'aide de divers jQuery hauteur de fonctions (innerHeight, outerHeight, hauteur) en vain. J'ai dépouillé tout le style css qui peuvent avoir été potentiellement interférer avec la valeur de la hauteur (tout le rembourrage, les bordures, marges, etc), mais je reçois toujours des résultats incohérents.

Si cela peut aider, j'ai affaire à des cellules de tableau. Le code crée une deuxième table à côté de la première, et puis les matches de la hauteur de chaque ligne pour créer une sorte de "post-it" colonne de gauche sur la table. Les cellules ont le contenu varie mais correspondant à 0 les valeurs de la frontière, de rembourrage et de la marge sur tous les côtés.

MODIFIER
6 heures plus tard, ce problème continue de la souche de moi.

Quand je nix les frontières et passer à l'utilisation de innerHeight() pour obtenir la mesure de la hauteur, les deux navigateurs rendre à la perfection. Mais j'ai besoin d'obtenir un bas-frontière...

Pour le moment j'ai rendu webkit le tableau avec les frontières de la perfection, et que firefox est désactivée par 1px sur chaque cellule. Je suis passé à l'aide de jQuery innerHeight() pour saisir les hauteurs de cellules sur la base de la table, mais de toute façon, firefox vient toujours un pixel court sur la mesure.

Voici le code impliqués. Notez que le code HTML est copié à partir de firebug APRÈS avoir été générés par le script, de sorte que la hauteur des déclarations sont faites là-bas. "maître" tableau HTML:

<table cellpadding="0" border="0" class="items-table">
<tbody>
<tr class="selected">
<td itemid="70609" class="id" style="display: none;">
70609
</td>
<td class="thumb">
<div class="item-thumb">
<div style="background-image: url(&quot;http://c1263382.cdn.cloudfiles.rackspacecloud.com/2C5D13C6-8A9F-47D9-81B51305D3FF24A9_t.jpg&quot;);" class="item-thumb-image">
<img src="http://c1263382.cdn.cloudfiles.rackspacecloud.com/2C5D13C6-8A9F-47D9-81B51305D3FF24A9_t.jpg">
</div>
</div>
</td>
<td class="details">
<div class="name">
<span class="code">R1000</span> <span class="description">Armoire</span>
</div>
<div class="itemtype">
<span>Casegoods</span> <input type="hidden" value="13" name="70609-itemtypeid" id="70609-itemtypeid" class="itemtypeid">
</div>
</td>
</tr>
<tr class="selected">
<td itemid="70634" class="id" style="display: none;">
70634
</td>
<td class="thumb">
<div class="item-thumb">
<div style="background-image: url(&quot;http://c1263382.cdn.cloudfiles.rackspacecloud.com/29DA825A-0431-49ED-A2614B3544EB50D2_t.jpg&quot;);" class="item-thumb-image">
<img src="http://c1263382.cdn.cloudfiles.rackspacecloud.com/29DA825A-0431-49ED-A2614B3544EB50D2_t.jpg">
</div>
</div>
</td>
<td class="details">
<div class="name">
<span class="code">C1124</span> <span class="description">Nightstand</span>
</div>
<div class="itemtype">
<span>Casegoods</span> <input type="hidden" value="13" name="70634-itemtypeid" id="70634-itemtypeid" class="itemtypeid">
</div>
</td>
</tr>
<tr class="selected">
<td itemid="70642" class="id" style="display: none;">
70642
</td>
<td class="thumb">
<div class="item-thumb">
<div style="background-image: url(&quot;http://c1263382.cdn.cloudfiles.rackspacecloud.com/46AAB8C6-7BAD-4740-8B26A05521025029_t.jpg&quot;);" class="item-thumb-image">
<img src="http://c1263382.cdn.cloudfiles.rackspacecloud.com/46AAB8C6-7BAD-4740-8B26A05521025029_t.jpg">
</div>
</div>
</td>
<td class="details">
<div class="name">
<span class="code">999</span> <span class="description">Nice Table New Name</span>
</div>
<div class="itemtype">
<span>Casegoods</span> <input type="hidden" value="13" name="70642-itemtypeid" id="70642-itemtypeid" class="itemtypeid">
</div>
</td>
</tr>
<tr class="selected">
<td itemid="70643" class="id" style="display: none;">
70643
</td>
<td class="thumb">
<div class="item-thumb">
<div style="background-image: url(&quot;http://c1263382.cdn.cloudfiles.rackspacecloud.com/71F27D5A-8BA6-428B-BAD842D699B6591A_t.jpg&quot;);" class="item-thumb-image">
<img src="http://c1263382.cdn.cloudfiles.rackspacecloud.com/71F27D5A-8BA6-428B-BAD842D699B6591A_t.jpg">
</div>
</div>
</td>
<td class="details">
<div class="name">
<span class="code">OC603</span> <span class="description">Coffee Table</span>
</div>
<div class="itemtype">
<span>Casegoods</span> <input type="hidden" value="13" name="70643-itemtypeid" id="70643-itemtypeid" class="itemtypeid">
</div>
</td>
</tr>
<tr class="">
<td itemid="70644" class="id" style="display: none;">
70644
</td>
<td class="thumb">
<div class="item-thumb">
<div style="background-image: url(&quot;http://c1263382.cdn.cloudfiles.rackspacecloud.com/BB263083-013F-4188-BF26CA77CF66C1E5_t.jpg&quot;);" class="item-thumb-image">
<img src="http://c1263382.cdn.cloudfiles.rackspacecloud.com/BB263083-013F-4188-BF26CA77CF66C1E5_t.jpg">
</div>
</div>
</td>
<td class="details">
<div class="name">
<span class="code">OC606</span> <span class="description">Coffee Table</span>
</div>
<div class="itemtype">
<span>Casegoods</span> <input type="hidden" value="13" name="70644-itemtypeid" id="70644-itemtypeid" class="itemtypeid">
</div>
</td>
</tr>
</tbody>

secondaire tableau HTML:

<table cellpadding="0" border="0" class="items-table">
<tbody>
<tr>
<td itemid="70609" class="id" style="height: 45px;"></td>
<td data-contactid="34759" class="bid pending" style="height: 45px;">
<div class="bid-container">
&nbsp;
<div>
Sent 2 days ago
</div>
</div>
</td>
<td data-contactid="34746" class="bid" style="height: 45px;">
<div class="bid-container">
&nbsp;
</div>
</td>
</tr>
<tr>
<td itemid="70634" class="id" style="height: 53px;"></td>
<td data-contactid="34759" class="bid" style="height: 53px;">
<div class="bid-container">
&nbsp;
</div>
</td>
<td data-contactid="34746" class="bid bid-data assigned" style="height: 53px;">
<div class="bid-container">
&nbsp;
<div class="cost">
$90.00
</div>
</div>
</td>
</tr>
<tr>
<td itemid="70642" class="id" style="height: 53px;"></td>
<td data-contactid="34759" class="bid pending" style="height: 53px;">
<div class="bid-container">
&nbsp;
<div>
Sent 2 days ago
</div>
</div>
</td>
<td data-contactid="34746" class="bid" style="height: 53px;">
<div class="bid-container">
&nbsp;
</div>
</td>
</tr>
<tr>
<td itemid="70643" class="id" style="height: 45px;"></td>
<td data-contactid="34759" class="bid pending" style="height: 45px;">
<div class="bid-container">
&nbsp;
<div>
Sent 2 days ago
</div>
</div>
</td>
<td data-contactid="34746" class="bid" style="height: 45px;">
<div class="bid-container">
&nbsp;
</div>
</td>
</tr>
<tr>
<td itemid="70644" class="id" style="height: 45px;"></td>
<td data-contactid="34759" class="bid" style="height: 45px;">
<div class="bid-container">
&nbsp;
</div>
</td>
<td data-contactid="34746" class="bid" style="height: 45px;">
<div class="bid-container">
&nbsp;
</div>
</td>
</tr>
</tbody>
</table>

CSS:

.items-table {
font-size: 12px;
color: #252629;
position: relative;
}
.items-table td {
height: 46px;
padding: 4px;
border-bottom: 1px solid #E0E3E3;
vertical-align: top;
}
.items-table .item-thumb { margin-right: 0px; }
.items-table tr { cursor: pointer; }
.items-table td.id { display:none; }
.items-table td.checkbox { width: 16px; padding: 0 6px 0 9px; vertical-align: middle; }
.items-table td.thumb { width: 48px; vertical-align: middle; }
.items-table td.details { vertical-align: middle; }
.items-table td.details .code { font-weight: bold; }
.items-table td.details .itemtype { color: #606060; }
.items-table tr.selected td {
background: #E3E3E3;
}
.items-table tr:hover td { background: #ccdbe5; }
.items-table tr.active td { background: #1f6497 url('/images/selected-item.png') repeat-x  top left; color: white; font-weight: bold; }
.items-table tr.active .itemtype { color: #C1C5E1; }
.items-table .cost { padding: 2px 0 0 0; }
.items-table .tags { padding: 2px 0 0 0; }

jQuery entreprise:

$('#items .items-table tr').each(function() {
var ti = $(this).find('.id').text();
$('#bids .items-table').append("<tr><td class='id' itemid='"+ti+"'></td>"+newCells+"</tr>")
var th = $(this).find('td.thumb').innerHeight();
$('#bids .items-table').find('tr:last td').height(th);
});

Et c'est à quoi il ressemble dans google Chrome:
le texte d'alt http://dl.dropbox.com/u/5536259/chromeSpacing.png

Firefox:
le texte d'alt http://dl.dropbox.com/u/5536259/firefoxSpacing.png

source d'informationauteur Jordan Sitkin

4

Avez-vous essayé de ne pas le style de la TD éléments à tous, mais au lieu de la DIV éléments qui enveloppent la cellule? Ensuite, de calculer et de définir la DIV hauteurs parce que c'est plus fiable? Laissez-le set de table à la hauteur de la cellule automatiquement en fonction de son contenu.
Cela, parce que vous avez déjà prouvé que les différents navigateurs calculer TD hauteurs différentes (avec bordure...)
13

Firefox et, en général, les navigateurs basés sur Gecko diffèrent des autres en ce qu'ils essaient de faire des sous la présentation et le rendu.

Cela peut rendre la vie difficile, surtout si vous travaillez avec des cellules de tableau qui sont dimensionnés en fonction de leur contenu.

C'est à dire, Webkit et Gecko peut rapport de dimensions différentes - les derniers rapports exotiques fractions de tailles ainsi.

Comme pour le bug: après avoir lutté avec quelque chose de similaire, - mesurer les dimensions d'dynamiquement la taille des cellules de tableau pendant un certain temps, j'avais fini de revêtement spécial pour des nombres fractionnaires.

Parce qu'elle influence les positions ainsi que les dimensions, certaines les gens finissent par à l'aide de clientWidth au lieu de jQuery 'innerWidth()'tandis que quelques-uns, juste utiliser parseInt() sur les résultats retournés.
(Recherche de fract dans les sources.)

Si ce n'est pas satisfaisante, vous pouvez essayer ce qui suit:
- rendu de la table principale avec "visibility:hidden" par défaut, de sorte qu'il est fixé, mais pas affiché
- mesurer la cellule hauteurs de jQuery
- tour les hauteurs à l'entier le plus proche de la valeur dans le primaire de la table et appliquer un style en ligne (arrondi vers le haut peut être une bonne idée pour s'assurer que les cellules ne sont pas coupés contenu par 1px)
- rendu de la table secondaire sur la base de ces valeurs entières et restaurer la visibilité de table primaire
Il peut toujours se produire que les frontières ne sont pas alignés, ce qui peut être le cas si la situation de l'enseignement primaire et secondaire, les tables ne sont pas les mêmes (par exemple: primaire supérieur: 123.75 px, secondaire supérieur: 123px.) Dans ce cas, de placer les tables dans un contenant ou tout simplement un repositionnement à l'entier coordonnées peut aider.

Bonne chance...

Edit: Aussi loin que je me souvienne, à cause de certaines IE et border-collapse anomalies, j'ai eu recours à l' (obsolète) cellspacing de la propriété qui doit être placée sur l'élément de tableau en HTML, pas de CSS et spécifié séparer les frontières avec une dimension de 0 en CSS. J'ai placé l'ensemble du tableau dans un div avec une belle couleur d'arrière-plan.

L'ensemble avait le même effet que si les bordures de la table ont été 1px, s'est effondré d'avoir la couleur de l'arrière-plan div....
0

J'ai eu le même problème, qui semble être un bug bien que je ne suis pas sûr à 100%. Si par exemple, un certain élément a rembourragele innerHeight() n'a pas montré le même résultat dans Webkit et mozilla Firefox. Comme solution temporaire, j'ai utilisé les deux innerHeight() ainsi que height() pour obtenir la bonne hauteur de l'élément.

De même, je n'ai pas pu utiliser le height() de montrer de la même manière sur tous les navigateurs (IE et d'autres). J'ai utilisé quelque chose comme ce qui a fonctionné dans les navigateurs:
```
$("#element").css('height', '100');
```
Voir aussi innerHeight() et outerHeight() lorsque vous souhaitez inclure rembourrage /frontières /marges.
0

Firefox est un morceau de merde. L'ajout d'un conteneur <div> et en cours d'exécution outerHeight() sur qui résout le problème.

Vous devez vous connecter pour publier un commentaire.