Mise en page: différences de rendu fixes dans Safari

Question

Fondamentalement, le problème que j'ai est que dans Safari/Chrome, il change la largeur de mes colonnes, même si j'ai spécifié a) une largeur sur la table, b) mise en page: fixe, et c) des largeurs spécifiques sur ma première ligne qui, ajoutées avec les valeurs de remplissage et de bordure, s'ajoutent à la largeur de la table spécifiée. Dans IE7 et Firefox 3, la table est rendue identique. Mais dans Safari/Chrome, il décide d'agrandir la deuxième colonne en prenant de la place par rapport aux autres colonnes.

Des idées? J'ai un very simple sample page que vous pouvez regarder, ainsi que an image montrant comment la table est rendue dans les trois navigateurs pour la comparaison.

Answer 1

Après avoir regardé autour, je pense que cela est causé par les bugs webkit suivants: 13339 et 18565. Fondamentalement, un problème avec la façon dont il utilise les valeurs de bordure et de remplissage dans le calcul de la largeur finale des colonnes. J'ai fini par faire un peu de renifleurs de navigateur et j'ai défini des valeurs css différentes pour les navigateurs webkit afin que le rendu final soit le même que FF et IE.

Answer 2

Avez-vous essayé de réinitialiser les CSS? http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

Answer 3

J'ai été en mesure de contourner ce problème en enlevant le rembourrage du <th> avec la largeur fixe. Vous pouvez ensuite ajouter en toute sécurité le rembourrage au <td>

Answer 4

Dans les webkits buggés, table-layout: fixed donne également à vos cellules de table box-sizing: border-box. Une alternative à la détection du navigateur est explicitement définie box-sizing: border-box pour obtenir un comportement cohérent entre les navigateurs, puis ajustez vos largeurs et hauteurs en conséquence (les largeurs et les hauteurs doivent être augmentées pour inclure le remplissage et les bordures).

#my-table td { 
    box-sizing: border-box; 
} 

Answer 5

J'ai fait une grille de Kendo avec table: largeur fixe. Toutes les colonnes ont disparu mais seulement dans Safari. Lors de l'inspection, les éléments td ont tous une largeur de style calculée de -3px. Si j'enlève la table: fixed-width, ça va. Si je spécifie des largeurs de pixels personnalisées (mais pas des pourcentages), ça va. Si je désactive chaque style appliqué à partir de chaque source css que je peux trouver (dans l'onglet de style de la console), le problème n'est pas résolu et rien ici ne définit la largeur -3px.

Je dois donc soit définir toutes les largeurs de pixels de la colonne, soit ne pas utiliser de table: fixed-width.