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">

Le test a révélé que la marge supérieure de bp ne fonctionne pas et que l'effet d'affichage est toujours de 0 px. Si vous utilisez Firebug pour l'afficher dans Firefox, vous pouvez voir que margin-top a une valeur de 10px ; la solution au problème est la suivante :

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

2. Ajoutez padding-top au p externe

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,

débordement

 : caché ou auto

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

< /p>

Remarque : ajoutez un

clear float

après.

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!