2009-10-14 7 views
1

Je me suis cogné la tête contre le mur pendant quelques heures comment essayer de régler ce problème. J'essaie de positionner un div l'un sur l'autre dans le but d'en fondre l'un sur l'autre. Les divs auront une image et un autre html en eux. Je ne peux pas obtenir l'opacité pour travailler dans ie8. J'ai simplifié autant que possible mon code HTML:opacité dans ie utilisant divs positionnés absolument ne fonctionne pas

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

<style> 

    * { margin: 0; padding: 0; } 

    .carousel-container { 
    position: relative; 
    } 

    .carousel-overlay { 
    position: absolute; 
    } 

    #carousel-container-a { 
    opacity: 1; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); 
    } 

    #carousel-container-b { 
    opacity: 0; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);  
    } 

    h1 { font-size: 100px; } 


</style> 

</head> 
<body> 


<div id="carousel-container-a" class="carousel-container"> 
    <div class="carousel-overlay" style="left: 10px; top: 10px;"> 
    <h1 style="color: black;">Showcase</h1> 
    </div> 
    <!-- other elements removed for simplicity --> 
</div> 
<div id="carousel-container-b" class="carousel-container"> 
    <div class="carousel-overlay" style="left: 20px; top: 20px;"> 
    <h1 style="color: red;">Welcome</h1> 
    </div> 
    <!-- other elements removed for simplicity --> 
</div> 


</body> 
</html> 

Pourquoi l'opacité ne fonctionne-t-elle pas? Comment puis-je le faire fonctionner?

Répondre

0

Essayez d'appliquer haslayout aux éléments.

#carousel-container a { zoom:1; } 

Largeur/hauteur/bloc en ligne et une foule d'autres fonctionneront également.

1

Donnez ce un coup:

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;

Cette intègre à la fois des déclarations pour IE7 et IE8. Cela devrait gérer l'opacité correctement pour vous. Bien que ce soit similaire à ce que vous utilisez déjà, j'ai réarrangé les déclarations. Selon Microsoft, vous devez d'abord lister le nouveau format d'extension, puis les anciens paramètres. Ceci en plus du paramètre d'opacité CSS.

Questions connexes