Débogage Cross Browser entre Firefox et Safari (ou Chrome)

Question

J'ai remarqué que Safari et Chrome se comportent de la même manière en ce qui concerne HTML et CSS. Cependant, il existe des différences entre Firefox et Safari (et donc aussi Chrome).

Parfois, les choses peuvent être belles dans Firefox, mais le CSS se comporte mal dans Safari et Chrome. La cause du mauvais comportement peut être attribuée à «n'importe quoi» (contrairement à IE 6 et 7, les comportements erronés sont généralement causés par des bourrelets/marges excessifs qui font flotter les éléments). Par exemple, alors que le débogage CSS d'un site Web pour Safari les attributs suivants ont fait inconduites cross-browser:

• Position
• hauteur
• largeur
• rembourrage
• marge

Existe-t-il un modèle commun pour le débogage CSS Chrome et Safari? Pouvez-vous nous donner un aperçu des différences entre Safari et Firefox qui peuvent m'aider avec mon débogage cross-navigateur? Merci

Answer 1

En règle générale, et anecdotiquement, la plupart des grandes différences entre l'affichage multi-navigateur de la même page sont dus à:

• invalide (x) html, utilisez le validateur HTML en ligne du W3 à assurer la validité de la majoration.
• l'absence d'établissement d'une ligne de base pour CSS (comme @Jeroen suggère: utiliser une réinitialisation css).
• utilisation de CSS qui varie à l'appui du navigateur à navigateur, en particulier la plus récente CSS 3 (transitions, column-count et box-reflect en particulier, mais il y a beaucoup, beaucoup d'autres).

---

1. Cela peut, ou non, une proposition d'inscription sur CSS3 par le Consortium World Wide Web, les seules références que j'ai trouvé pour elle sont exclusivement avec le préfixe fournisseur -webkit, qui suggère que c'est probablement une extension propriétaire. Je peux, cependant, espérer que d'autres suivront. Il est tellement plus facile d'appliquer des réflexions avec css qu'avec js/php ...

Answer 2

J'ai remarqué des différences, mais pas si dramatique. Comme d'habitude, la plupart des différences peuvent facilement être surmontées/évitées en utilisant un css-reset. En utilisez-vous un sur les pages dont vous parlez?

Answer 3

Cette différence css est due au fait qu'il existe une différence de styles par défaut pour les navigateurs firefox et chrome. Cliquez sur ce lien pour les feuilles de style CSS par défaut

http://hg.mozilla.org/mozilla-central/file/tip/layout/style/html.css http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css

Tout en développant la page Web lui-même, nous devons faire en sorte de passer outre ce style par défaut couramment pour les deux navigateurs. en utilisant les extensions du navigateur comme -webkit et -moz etc.Après le développement et dans l'état de débogage, nous devons remplacer ces styles par défaut. Je ne pense pas que nous ayons un débogage commun pour cela. Corrigez-moi si je me trompe.