Pourquoi Safari 4/mac ne restitue pas les marges supérieure et inférieure dans cette div imbriquée?

Safari 4 semble ignorer les marges des éléments sauf si j'ajoute une bordure.Pourquoi Safari 4/mac ne restitue pas les marges supérieure et inférieure dans cette div imbriquée?

L'exemple suivant restitue les marges gauche et droite mais pas de haut ou de bas.

Lors de l'ajout d'une bordure, il s'affiche comme prévu. Est-ce que je fais quelque chose de mal ou vais-je devoir ajouter des bordures (albeit transparent ones) à chaque élément avec des marges juste pour Safari?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>testing</title> 
<style> 
    body {background-color:#666;} 
    div {display:block; position:relative; margin:0; padding:0;} 
    .background {background-color:#990000;} 
    .foreground {background-color:#fff; margin:10px; padding:10px;} 
</style> 
</head> 
<body> 
    <div class='background'> 
     <div class='foreground'> 
     foreground 
     </div> 
    </div> 
</body> 
</html>

Source

2010-10-13 Moob

juste une note de côté, affichage: le bloc est superflu sur divs car c'est l'affichage par défaut. Je ne définirais pas non plus la position par défaut: relative à divs, je me souviens d'avoir eu des problèmes avec ceci dans le passé (bien que je ne me souvienne pas exactement pourquoi), je ne l'utilise que lorsque c'est nécessaire. Aussi, je pense que le padding/marges par défaut pour les divs est en fait 0, donc vous pouvez probablement omettre cette déclaration div css entière sans effets secondaires. – brad

@brad oui merci, mais je voulais le clouer pour cet exemple. En outre, définir la position: relative est utile lorsque vous souhaitez le positionner relativement (ce qui est souvent le cas) – Moob

Il s'agit d'une marge normale d'appel de comportement bizarre (édité, désolé je suis français) s'effondrer. Pour éviter cela, ajoutez overflow:auto; sur le conteneur.

.background {background-color:#990000; overflow:auto;}

Source

2010-10-13 15:10:11 MatTheCat

Oui, vos marges sont * effondrement *, ce qui est normal. [Cet article] (http://www.complexspiral.com/publications/uncollapsing-margins/) pourrait aider à expliquer les choses. –

Merci. Article intéressant - Il pourrait être correct mais cela ne le rend pas correct! Tous les autres navigateurs semblent comprendre ce que l'on entend par marge et faire face à leur combinaison dans le cas d'éléments marginaux adjacents. – Moob

@Moob Est-ce que cela fonctionne vraiment comme vous l'attendez dans tous les autres navigateurs? Je ne m'attendrais pas à cela ... Firefox semble réduire les marges du haut/bas avec votre code d'exemple pour moi (http://jsfiddle.net/8tbjW/). Normalement c'est juste IE qui est cassé, bien que je prenne votre point que le comportement de non-effondrement peut sembler plus sensible parfois. –

Il est appelé effondrement de marge. Quand une marge supérieure et inférieure se touchent, les marges se combinent dans le plus grand des deux.

La raison pour laquelle cela fonctionne "correctement" lorsque vous ajoutez la bordure est que vous avez créé un séparateur 1px pour les marges afin qu'elles ne s'affaissent plus. Fait intéressant, si vous ajoutiez à la place une div vide sans hauteur/bordures, les marges s'effondreraient quand même parce que la div occuperait 0px d'espace.

Source

2010-10-13 15:16:19 Moses

Bon, mais dans cet exemple, la marge combinée est 0 + 10px = 10px. Merci néanmoins pour l'info. – Moob

Pourquoi Safari 4/mac ne restitue pas les marges supérieure et inférieure dans cette div imbriquée?

Répondre

Questions connexes