Solution au problème selon lequel la définition de la marge supérieure dans la DIV interne ne fonctionne pas

(1)

Récemment, alors que je travaillais sur un autre site Web, j'ai de nouveau rencontré ce problème et j'ai décidé de l'étudier attentivement et de le résoudre.

Le code est le suivant :

Couche supérieure

margin-top:200px;">Sub-layer

L'effet idéal est que le le calque parent et le calque supérieur montrent que le calque enfant est à 200 pixels du haut du calque parent, ce qui est normal dans IE, mais il y a un problème dans FF. Le calque enfant et le calque parent sont soudés, mais le parent. Le calque et le calque supérieur sont séparés de 200 px.

J'étais perplexe, alors je me suis tourné vers Google et j'ai obtenu la phrase suivante :

Quand deux conteneurs sont imbriqués, s'il n'y a rien d'autre entre le conteneur externe et l'élément conteneur interne , Firefox appliquera la marge supérieure de l'élément interne à l'élément parent.

C'est-à-dire que parce que le calque enfant est le premier élément enfant non vide du calque parent, cette erreur se produira lors de l'utilisation de margin-top.

Il existe deux solutions :

1. Utilisez le flottement pour résoudre le problème, c'est-à-dire modifiez le code de la sous-couche en :

Sublayer

2. Utilisez padding-top pour résoudre le problème, c'est-à-dire :

Sous-couche

(2)

Souvent, vous pouvez rencontrer un tel problème, c'est-à-dire que la hauteur et la largeur de la couche externe p sont définies et que la définition du dessus de marquage sur la couche interne p ne fonctionne pas (testé dans FIREFOX et IE8). c'est à peu près que la couche interne p n'obtient pas la mise en page. Par exemple, le code suivant :

< p class ="cp">

1. Remplacez margin-top par padding-top ; , mais le principe est que la couche interne Le p n'a pas de bordure définie

3. Ajoutez le p externe :

A, float : left ou droite

B , position : absolue

C, affichage : bloc en ligne ou cellule de tableau ou autre type de tableau

D,

 : caché ou auto

Par exemple, vous pouvez modifier le code ci-dessus comme suit :

< /p>

clear float

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!