Quel est le problème avec ce simple CSS dans IE?

Il y a un div qui a un contenu interne, un div avec une bordure qui est à l'intérieur d'un div. D'une certaine manière, cette div est élargie pour englober la prochaine div. C'est impressionnant.Quel est le problème avec ce simple CSS dans IE?

<div style="background: yellow;"> 
    <div> 
    <div style="border: 1px solid black; background: green">green background</div> 
    </div> 
</div> 
<div style="margin-top: 100px;"> 
    IE gives me a yellow background, unless i take away the border of the green 
    background div. 
</div>

Je me demande la cause de ceci et comment le résoudre.

Source

2008-12-15 Sam

Je n'ai pas l'effet que vous essayez d'obtenir. Essayez de décrire cela, alors il pourrait être plus facile d'aider. Surtout le premier enfant div n'a pas beaucoup de sens puisqu'il n'a aucun style. –

J'essaie de commenter, chaque enfant ayant une bordure gauche. Pour une raison quelconque, cette frontière est "saignée" à tous les autres enfants sur toute la page. – Sam

Par "prochain" je veux dire "nid" – Sam

Vous devez "donner la mise en page" à la première div. Vous feriez mieux de le faire en utilisant les styles ciblés IE6:

<style> 
    * html .haslayout { 
     display:inline-block; 
    } 
</style> 

... 

<div style="background: yellow;" class="haslayout">

Ceci est un problème IE6 connu avec l'attribut hasLayout. En savoir plus ici - http://www.satzansatz.de/cssd/onhavinglayout.html

Source

2008-12-15 09:57:50

FF et IE-trans font des choses différentes avec ce bloc-inline cependant. Bien que je pense qu'il est préférable de résoudre le problème pas le symptôme, vous êtes tout à fait correct et haslayout pourrait être plus facilement donné avec zoom: 1.0; si le PO ne peut vraiment pas utiliser strict. – annakata

Je l'ai modifié pour utiliser les règles spécifiques IE6 –

pas un fan de règles conditionnelles? (Je ne suis pas à bout de nerfs, je ne suis pas sûr des meilleures pratiques moi-même) – Jimmy

Une solution consiste à mettre "position: relative" partout, mais cela casse d'autres choses dans ma page.

Source

2008-12-15 09:26:24 Sam

On dirait que vous êtes en quirksmode transitionnel qui est EVIL.

Strict résout ce problème.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Source

2008-12-15 09:30:22 annakata

Essayé dehors ... mettez-le dedans avant et c'est toujours cassé. – Sam

+1 mais juste ajouter il ya une gamme de doctypes qui vous sortiront du mode quirks http://en.wikipedia.org/wiki/Quirks_mode – Greg

C'est tout ... juste le doctype et [ce que j'ai écrit] – Sam

Il vous manque un point-virgule dans la div interne. J'ai vu un comportement très étrange si le dernier point-virgule est omis.

<div style="border: 1px solid black; background: green;">green background</div>

Je ne sais pas quelle version de IE que vous avez, mais cela fonctionne dans IE7

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
    <head> 
    <title>Test</title> 
    </head> 
    <body> 
    <div style="background: yellow;"> 
    <div> 
     <div style="border: 1px solid black; background: green;">green background</div> 
     </div> 
    </div> 
    <div style="margin-top: 100px;"> 
     IE gives me a yellow background, unless i take away the border of the green 
     background div. 
    </div> 
    </body> 
</html>

Source

2008-12-15 09:31:36

Dans l'opéra il semble, très bien. Dans IE, c'est faux. –

La réponse est très facile, parce que vous imbriquer div diviseurs, et aucun d'entre eux a une hauteur, donc il y a un débordement pour IE6. faire:

<div style="background: yellow;height: 1%;">

et il fonctionne très bien.

Source

2008-12-15 22:44:05

Quel est le problème avec ce simple CSS dans IE?

Répondre

Questions connexes