Rendu d'affichage des bordures différents selon navigateurs

**Arnaud F.** · 15/07/2009, 13h41

Bonjour,

j'ai déjà lu quelques discussions là dessus mais je n'ai pas eu de solutions, du coup, je poste ici.

Voici mon souci : je déclare une div avec une largeur / longueur de 100px sur 100px, sur IE6, les bordures (de 1px) sont "extériorisées" (donc 102px) tandis que sur FF3, elles sont "intériorisées" et donc mes div font bien 100px.

Comment remédier au problème sachant que je suis en mode standard et que j'utilise le doctype suivant :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

?

**Macmillenium** · 15/07/2009, 14h08

Salut Arnaud,

La déclaration XML :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<?xml version="1.0" encoding="utf-8"?>

Bascule IE6 en mode de rendu Quirks, mode non standard qui fait que IE (ici la 6) utilise son propre modèle de boite appelé modèle de boite de Microsoft dont les padding et border sont inclus le width.

En mode de rendu standard, IE (comme les autres navigateurs alternatifs) utilise le modèle de boite standard, c-à-d: largeur finale = width+padding+border

Solution : enlever la déclaration XML

**Arnaud F.** · 15/07/2009, 14h55

Salut,

je ne suis apparemment pas maître de mon DOCTYPE, y aurait-il une solution pour pallier à ça sans pour autant modifier le doctype?

Sinon, je confirme qu'en testant "à côté", ça résout bien mon problème

**Macmillenium** · 15/07/2009, 15h21

Envoyé par Arnaud F.

je ne suis apparemment pas maître de mon DOCTYPE, y aurait-il une solution pour pallier à ça sans pour autant modifier le doctype?

Tu peux rajouter les 1px dans une CSS dédiée à IE6 appelée via commentaires conditionnels dans le head :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<!--[if lte IE 6]>
<style type="text/css" media="screen">
.lebloc {
   width:102px;
   height:102px;
}
</style>
<![endif]-->

Sachant que les problèmes d'IE en mode Quirks sont très nombreux

**Arnaud F.** · 15/07/2009, 15h32

Bah ok, j'vais voir ce que je peux faire alors

beaucoup

Rendu d'affichage des bordures différents selon navigateurs

CSS

Discussions similaires

Partager

Partager