Problèmes de compatibilité du navigateur CSS

J'ai récemment conçu une application Web pour un client. J'ai utilisé CSS pour une mise en page de l'application. J'ai testé la mise en page sur IE7, Mozilla 3.0.1, Google Chrome 2.0.xxx, Safari 3.1 et Opera 9.51.Problèmes de compatibilité du navigateur CSS

Ils ont tous affiché correctement sans problèmes. Après la livraison de l'application, mon client a remarqué qu'il avait des problèmes de compatibilité avec IE6. Le site n'a pas été affiché correctement.

Comment résoudre ce problème? Je n'ai pas IE6 sur mon système pour essayer même de le réparer. Chaque fois que j'essaie de rétrograder mon navigateur à IE6, IE va cesser de fonctionner. Y at-il un moyen que je peux obtenir un environnement qui peut simuler IE6 en ligne.

Deuxièmement, utilise des frameworks css pour résoudre le problème de compatibilité et même si je veux utiliser un framework css, lequel est meilleur en dehors de blueprint css.

Merci pour votre temps.

Source

2009-08-07 War Coder

Et c'est pourquoi nous avons des contrats lorsque nous travaillons pour des personnes - j'espère que le client a payé un supplément pour le travail de compatibilité IE6 ... – ijw

J'ai le sentiment que vous utilisez un problème de modèle de boîte parce que vous êtes en mode Quirks. IE7 + et tous les autres navigateurs utilisent le modèle de boîte W3C tandis que IE6 utilise le modèle IE Box en mode Quirks.

Le modèle de la boîte IE (connu comme le modèle de boîte traditionnel), comprend le rembourrage et la bordure dans la largeur/hauteur d'un élément.

Sous le modèle de boîte IE, une boîte ayant une largeur de 100px, avec un remplissage de 2px de chaque côté, une bordure de 3px et une marge de 7px de chaque côté, aura une largeur visible de 114px.

La boîte W3C modèle (qui est le modèle de boîte standard), exclut le rembourrage et la bordure de la largeur/hauteur d'un élément.

Sous le modèle de boîte W3C, une boîte ayant une largeur de 100px, avec un remplissage de 2px de chaque côté, une bordure de 3px et une marge de 7px de chaque côté, aura une largeur visible de 124px.

Box Models http://www.456bereastreet.com/i/box-model.gif

Afin de IE utiliser le modèle de boîte W3C (qui est ce que tout autre navigateur utilise), votre page doit être rendu en mode strict. Par défaut, IE s'affiche en mode Quirks. Pour activer le mode strict dans Internet Explorer, vous devez spécifier un doctype afin de pouvoir activer le mode strict dans Internet Explorer. Vous pouvez utiliser l'une des doctypes suivantes:

HTML4 stricte:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd" >

XHTML 1.0 Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Votre doctype doit être la première chose à apparaître sur votre page. C'est même avant l'étiquette <html>, sur sa propre ligne. (L'ajout d'un prolog <?xml> fera revenir IE en mode Quirks, donc supprimez-le si vous en avez un).

Plus d'informations sur Quirks/Mode Strict ici:

CSS - Quirks mode and strict mode

Bien que l'ajout d'un doctype pour basculer en mode Standards pourrait ne pas résoudre tous vos problèmes, vous aurez au moins prendre un ÉNORME pas dans la bonne direction.

Source

2009-08-07 16:27:33

Même en mode standard, les fonctionnalités layout/CSS/Javascript d'IE6 sont, elles, 'limitées', mais c'est l'étape 1 du portage IE6. – ijw

IE6 est un désastre connu dans la façon dont il gère CSS. Votre meilleur pari est d'utiliser une machine virtuelle ou un ancien système qui a IE6 sur elle et l'utiliser pour le test. Cependant, il existe quelques outils décents qui émuleront IE6 pour la plupart. Mon préféré est IETester. Il y a un outil en ligne au browsershots.org ce n'est pas mal non plus, mais je trouve que ce n'est pas cohérent parfois.

Votre meilleure approche consiste à créer une feuille de style séparée pour IE6 uniquement, et à laisser le reste de votre CSS en état de marche. Vous pouvez charger une seule IE6 stylesheet en utilisant ce qui suit dans votre code HTML <head>:

<!--[if IE 6]> 
    <link rel="stylesheet" type="text/css" href="IE-6-SPECIFIC.css" /> 
<![endif]-->

Une fois qui est chargé, vous pouvez commencer vos styles habituels remplaçant qui ont des problèmes dans IE6.

Source

2009-08-07 02:34:35 zombat

Zombat est parfait. Utilisez un PC virtualisé avec IE6, et utilisez des commentaires conditionnels pour corriger * seulement * IE6 - tout le monde le verra comme un commentaire normal et l'ignorera. Je trouve que les programmes qui émulent ie6 ne le font pas assez bien pour vraiment s'assurer que vous le faites correctement. – Xanthir

IETester est ce que j'utilise. Je suis venu ici pour suggérer cette chose. Comme avec n'importe quel émulateur, il peut y avoir certaines choses qui ne sont pas représentées avec une précision de 100%, mais je n'ai pas encore rencontré de problème. – monkeypushbutton

Tout d'abord, il vous serait bien de télécharger le virtual pc et les tests de compatibilité IE VHD ici http://www.microsoft.com/Downloads/details.aspx?FamilyID=21eabb90-958f-4b64-b5f1-73d0a413c8ef&displaylang=en, j'ai également utilisé IEtester comme mentionné par zombat, mais je préfère les images VPC.

Vous pouvez ensuite tester votre application en fonction des différentes versions de IE.

Par souci d'obtenir IE 6 au travail, je souvent recours à une feuille CSS séparée pour elle, et un lien vers cette aide de commentaires conditionnels http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx

Bonne chance :)

Source

2009-08-07 02:37:07 seanb

IE 6 a un certain nombre de bugs dans son modèle de boîte CSS, provoquant la rupture des sites correctement codés sous ce navigateur. Il est possible à l'aide du modèle de boîte bidouille et d'autres solutions de contournement pour résoudre ces problèmes, il est donc une question d'IE 6. Here is a list of common fixes for IE 6 box model problems

Pour résoudre le IE 6 Problème - mon option préférée est d'installer un émulateur IE qui permet vous exécutez plusieurs versions d'Internet explorere. This one est plutôt bon, mais il y en a d'autres. Une autre façon courante est de créer une machine virtuelle exécutant IE 6 ou dual booting (les deux peuvent prendre beaucoup de temps et causer de la douleur, mais tout à fait réalisable). Je préfère utiliser un émulateur quand je peux.

Source

2009-08-07 02:39:10 PortageMonkey

Créez une feuille de style spécifique à la résolution des problèmes IE6 et appelez-la avec une instruction conditionnelle (prise en charge par IE uniquement).Voici un exemple de ce que vous devez inclure dans la tête de votre document:

<!--[lte IE 7]> 
    <link rel="stylesheet" type="text/css" href="ie6.css" /> 
<![endif]-->

Vous pouvez également envisager de « remise à zéro » votre CSS, ce qui aide à lancer les navigateurs hors sur un terrain de jeu de niveau (c.-à-faire débarrasser des marges inconsistantes et du remplissage dans IE). Celui que j'utilise peut être trouvé here, et Yahoo! offre une decent reset stylesheet dans le cadre de YUI 3.

Comme pour être en mesure de déboguer votre propre balisage et de style dans IE6, ce sont les deux options que je propose: Xenocode's Browser Sandbox virtualise navigateurs (IE6, IE7, IE8, FF2, FF3, Chrome, Opera 9, Safari 3, Safari 4) sur votre PC sans avoir à installer l'application elle-même, et IETester, ce qui est assez bogué mais vous permet de rendre votre balisage dans IE6, IE7 et IE8 sans avoir à les installer.

Source

2009-08-07 16:14:19 Intelekshual

Si vous avez une licence Win2K, saisissez VirtualBox, installez Win2K dessus avec IE6 et testez la page à partir de là. C'est comme ça que je fais la plupart de mes tests sans avoir à installer IE6.

Si c'était pas quelque chose que vous faites pour un client spécifique, mais le web en général, je vous recommande d'utiliser le code de IE6 No More!

Source

2009-08-07 16:23:19

installer IETeaster pour tester dans différentes versions du navigateur IE. ici, vous pouvez savoir où le problème se pose

Source

2009-08-08 08:28:18

Je suppose, sous le modèle de boîte W3C, une boîte ayant une largeur de 100px, avec 2px rembourrage de chaque côté, une bordure de 3px, et une marge de 7px de chaque côté, avoir une largeur visible de 114px. pas 124 comme W3C exclut le remplissage et la bordure de la largeur/hauteur d'un élément.

Source

2009-09-02 13:03:28

Problèmes de compatibilité du navigateur CSS

Répondre

Questions connexes