2010-02-07 6 views
1

Vous pouvez enregistrer le code ci-dessous et l'essayer.Pourquoi ce petit fragment HTML/CSS ne produit-il pas les résultats attendus dans IE?

Dans firefox, il est gris du navigateur, mais dans IE (IE7 pour être exact), il ne fonctionne pas.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<style text="text/css"> 
.overlay { 
    position:absolute; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    z-index:1000; 
    background-color:grey; 
} 
</style> 
</head> 
<body style="font-size:62.5%;"> 

<div class="overlay"></div> 

</body> 
</html> 

Répondre

4

IE ne reconnaît pas le nom de couleur CSS grey. Essayez d'utiliser une couleur hexadécimale, par exemple #ccc, et cela fonctionnera. Alternativement, en utilisant gray (avec un «a», pas un «e») fonctionne également.

Notez que ceci est conforme aux normes, parce que le W3C ne dit rien sur la prise en charge d'autres orthographes de gray, et gray est en effet le nom de couleur according to the spec for CSS3.

+0

+1 c'est ça. Je n'avais jamais remarqué ça. Battez-moi au coup de poing. –

0

Essayez d'ajouter ceci à votre style defs:

html, body { 
    height: 100%; 
} 

Sur IE, body ne prolonge pas la pleine hauteur de la fenêtre par défaut et le conteneur de votre recouvrement est body, donc ...

Modifier Juste essayé, et le vôtre a travaillé sans ce qui précède, doit être parce que le corps est en position statique. De toute façon, John Feminella l'a compris; voir sa réponse.

Questions connexes