Faire largeur totale d'un div identique dans le mode strict et Quirks

StackOverflow https://stackoverflow.com/questions/2120273

  •  22-09-2019
  •  | 
  •  

Question

Considérez ce qui suit 

<div style="width:150px;border:50px solid black">Test</div>

Si cela est sortie sur une page qui IE8 rend en mode strict (ou si vous chargez dans Firefox etc), puis à l'intérieur de la div (la zone blanche où test est) sera 150px de large, mais la div au total sera 50 + 150 + 50 = 250 pixels de large (représentant la frontière)

Si cela est rendu en mode Quirks alors il ne sera 50 + 50 + 50 = 150 pixels de large.

La différence réside dans la largeur Quirks comprend toute frontière comme expliqué

Si vous mettez un fragment de HTML sur une page et vous ne savez pas à l'avance quel mode sera utilisé ce qu'il ya des hacks fiables (css / javascript ou autre) qui veillera à ce que la div a les mêmes dimensions en à la fois en mode Strict / Quirks sur tous les principaux navigateurs (IE6 / 7/8, Firefox, Opera, Chrome)?

Était-ce utile?

La solution

Je pense que je l'ai craqué (testé sur IE 6/7/8 bizarreries et mode strict et FF3.5)

Quriks / mode strict diffèrent sur la largeur d'un div que s'il y a remplissage / frontières impliquées.

faire une div extérieure pour définir la largeur, puis une div intérieure à la frontière.

Le div interne est limitée par la largeur de la div externe -. Et les deux bizarreries / modes stricts rendra la même taille

i.e.. 

<div style="width:150px;border:50px solid black">Test</div>

devient 

<div style="width:150px;">
   <div style="border:50px solid black">Test</div>
</div>

Autres conseils

C'est ce que l'attribut box-sizing est là pour ça. Voir ce guide .

La seule façon fiable, je peux penser est de sauter un peu (ou beaucoup) de styles CSS - frontières pour un. Si vous vous en tenez aux bases (avec divs couleurs de fond, par exemple) et ne pas trop jouer du violon avec rembourrages et des marges, vous devriez être en mesure d'obtenir un résultat assez cohérente.

Sur une note de côté -. Il est déjà assez difficile d'obtenir effectivement les navigateurs pour d'accord sur la façon dont les choses sont dans un doctype, même stricte

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top