Aide avec les frontières CSS DIV nécessaires, vue différente entre IE et FireFox

Je montre une image des différences dans la présentation des frontières pour div éléments entre IE et FireFox. IE affiche la bordure d'une manière correcte, mais pas FireFox. Comme vous pouvez le remarquer, la bordure noire pour BorderDiv semble ne pas respecter le fait que son parent div a une hauteur de 78 pixels. Au lieu de cela respecte la hauteur de la plupart div externe. Pour compliquer les choses, le côté droit de la frontière est dessiné sans respecter le plus extérieur div également.Aide avec les frontières CSS DIV nécessaires, vue différente entre IE et FireFox

alt text

Je suis perdu ici. Que dois-je faire pour obtenir dans FireFox le même résultat que dans IE? S'il vous plaît noter, que je veux avoir la largeur et la hauteur pour BorderDiv égal à 100%, je ne veux pas le définir explicitement.

Voici mon code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<HTML> 
<HEAD> 
</HEAD> 
<BODY> 
<div id = "MasterDiv" style = "float: left; width: 200px; height: 80px; background-color: Red"> 
    <div id = "RightDiv" style = "float: left; width: 100%; height: 78px; background-color: Blue;"> 
    <div id = "ContentColumn" style = "margin-left: 50px; height: 78px;"> 
    <div id = "BorderDiv" style = "border: solid 1px Black; height: 100%; width: 100%">right</div> 
     </div> 
    </div> 
    <div id = "LeftDiv" style = "float: left; margin-left: -100%; width: 50px; height: 78px; background-color: Green;">left</div> 
</div> 
</BODY> 
</HTML>

Merci.

Source

2010-11-23 Wodzu

Quelles versions d'IE et de FF? –

FF: 3.6.12, IE: 8.0.7600 – Wodzu

Pourquoi utiliser un div border? – Mauro

C'est en fait l'inverse: Firefox est correct, et IE est incorrect.

C'est à cause de la mauvaise implémentation d'IE du box model.

La div "BorderDiv" a une hauteur de 100% de son conteneur div ("ContentColumn") qui est 78px. Ensuite, en plus de cela, la bordure, le remplissage et la marge sont ajoutés.

Pourquoi ne pas simplement ajouter la frontière à la « ContentColumn » div et se débarrasser de la « BorderDiv » div total:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<HTML> 
<HEAD> 
</HEAD> 
<BODY> 
<div id = "MasterDiv" style = "float: left; width: 200px; height: 80px; background-color: Red"> 
    <div id = "RightDiv" style = "float: left; width: 100%; height: 78px; background-color: Blue;"> 
     <div id = "ContentColumn" style = "margin-left: 50px; height: 76px; border: solid 1px Black;"> 
      right 
     </div> 
    </div> 
    <div id = "LeftDiv" style = "float: left; margin-left: -100%; width: 50px; height: 78px; background-color: Green;"> 
     left 
    </div> 
</div> 
</BODY> 

</HTML>

Modifier modifié la « ContentColumn » d'avoir une hauteur de 76px, prendre en compte la taille de la frontière.

En outre, vous pouvez vouloir éviter quirksmode dans IE afin qu'il utilisera le bon modèle de boîte.

Source

2010-11-23 10:25:54

Merci, j'ai essayé votre code. Le look est consistant sur les deux navigateurs. Le côté droit de la commande est présenté correctement, mais le côté inférieur est toujours inférieur de 2 pixels à ce qu'il devrait être. Comment réparer ça? J'ai ajouté BorderDiv parce que je pensais que j'aurais des problèmes avec la correction des marges du corect dans la division externe, mais cela fonctionne bien sans cela. – Wodzu

Aide avec les frontières CSS DIV nécessaires, vue différente entre IE et FireFox

Répondre

Questions connexes