Incompatibilités croisées avec les marges?

J'ai un petit problème avec la compatibilité de x-browser (Chrome et FF) pour un textarea et des marges.Incompatibilités croisées avec les marges?

La page en question est ici: http://www.mylesgray.com/contact/

Le textarea sous "message" que vous pouvez voir est différent dans FF que dans Chrome:

FF 11:

Firefox

Chrome 17:

Chrome

Vous pouvez voir si vous regardez les bords inférieur et droit des deux lignes Chrome parfaitement, mais FF semble plus loin dans les deux directions et je ne peux pas comprendre pourquoi dans Firebug ou Chrome Dev Tools.

Il semble que ce soit un problème de webkit vs gecko car Espresso montre la même chose que Chrome.

Le CSS pour ce qui précède est:

.wpcf7-message { 
    float: left; 
    width: 26em; 
    height: 12.3em; 
    margin: 0; 
} 

.wpcf7-message textarea { 
    resize: none; 
    padding: 1em; 
    width: 100%; 
    height: 100%; 
    margin-top: 1.1em; 
    border: none; 
    -moz-border-radius: 0.5em; 
    -webkit-border-radius: 0.5em; 
    border-radius: 0.5em; 
}

Toute aide très appréciée!

Myles

Source

2012-02-29 Myles Gray

Vous pouvez essayer la taille de la boîte: border-box sur la zone de texte. Je ne suis pas sûr que ça marcherait mais ça vaut le coup d'essayer. – Bojangles

Je suppose que ce sont les unités 'em' que vous utilisez partout. Webkit rend le texte légèrement différent de celui de gecko (le même texte aura des largeurs différentes dans les deux navigateurs). En tant que test, définissez tous les remplissages, les marges et les largeurs sur des valeurs absolues et vérifiez si l'incohérence existe toujours. – Pat

Sûrement tout serait relationnel de toute façon? J'ai essayé ça et oui ça a fonctionné parfaitement mais les unités de mixage comme em et px me rendent sale, l'utilisation de valeurs absolues comme px me fait me sentir sale de toute façon. Y at-il un moyen d'y parvenir avec em? - Je suppose que non? –

Il s'agit probablement des unités em que vous utilisez partout pour les largeurs, les marges et le remplissage. L'unité em est basée sur la taille de police et webkit rend les polices légèrement différemment de gecko (le même texte dans webkit et gecko aura des largeurs différentes). À titre de test, modifiez vos largeurs CSS, le remplissage et les marges en valeurs absolues px et vérifiez si cela corrige les incohérences.

Source

2012-02-29 14:37:31 Pat

-1

Je dirais

Utilisez blueprint css framework, cela vous aidera ce type de problèmes Cross navigateur et enregistrer des temps beaucoup

il est venu avec des fichiers fixes IE,

<!--[if lt IE 8]> 
<link rel="stylesheet" href="../../blueprint/ie.css" type="text/css" media="screen, projection"> 
<![endif]--> 
<!--[if lt IE 9]> 
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]-->

Source

2012-02-29 00:46:13

Vous utilisez déjà le Reset CSS d'Eric Mayer - pas besoin de frameworks. Merci quand même. –

Incompatibilités croisées avec les marges?

Répondre

Questions connexes