opacity CSS propriété détail du bug

Explication de la gestion des bugs opacity CSS

Définition bug opacity CSS

Vous trouverez ci-dessous divers bugs d'interprétation de la CSS opacity.
Ces bugs ont été transmis par les internautes du site.

J'ai vérifié certains bugs mais pour la plupart des bugs CSS "non vérifiés", c'est que je ne possède pas le navigateur sur lequel a été détecté le bug.
Ceux que j'ai pu visualiser sont notés :
Bug vérifié : oui.

Bug opacity CSS n° 1

Bug opacity mis par Dmc

Système d'exploitation : windows xp
Navigateur : Internet Explorer
Bug vérifié : oui

Problème avec opacity:

Sous Internet Explorer la propriété css filter:alpha(opacity=NOMBRE) ne fonctionne pas.
Code CSS :

Exemple de code :
.transparence {   filter:alpha(opacity=10); } span {   font-weight:bold;   display:block; }

Code HTML :

Exemple de code :
<span>Texte opaque</span> <span class="transparence">Texte 10% en transparence</span>

Solution du problème par DMC :

Il s'agit d'un problème de "hasLayout", vous aurez un problème à chaque fois que vous utiliserez la propriété css filter: sur toutes les balises qui n'ont pas le layout.
Pour donner le layout, il vous suffit de mettre un zoom:1 ou un height:1% suivant les cas.
Code CSS :

Exemple de code :
.transparence {   filter:alpha(opacity=10);   zoom:1; }

Balises ayant le layout par défaut :
<table>, <td>, <body>, <img>, <hr>, <input>, <select>, <textarea>, <button>, <iframe>, <embed>, <object>, <applet>, <marquee>.
Les propriétés css qui donne le layout :

  • position: absolute,
  • float,
  • display: inline-block,
  • width,
  • height (height:1%),
  • zoom (zoom:1),
  • writing-mode: tb-rl

Vous trouverez des explications sur ce concept dans les liens de la zone CSS (Le concept de hasLayout dans IE/Win)

Bug opacity CSS n° 2

Bug opacity mis par Dmc

Système d'exploitation : windows xp
Navigateur : Internet Explorer
Bug vérifié : oui

Problème avec opacity:

Sous Internet Explorer; l'utilisation de la propriété css filter:alpha(opacity=NOMBRE) entraine un lissage de la police de mauvaise qualité.
Code CSS :

Exemple de code :
.nonlisse{   filter:alpha(opacity=100);   height:1%; } div {font-weight:bold;}

Code HTML

Exemple de code :
<div>Texte lissée</div> <div class="nonlisse">Texte non lissé</div>

Copie écran du bug :

Solution du problème par DMC :

Pour régler le problème du lissage de la police sur une propriété css filter:alpha(opacity=NOMBRE), il vous suffit de mettre une couleur de fond de la même couleur que le fond du parent. Avidement, cela implique que le fond du parent soit unit, dans la cas contraire j'ai pas de solition.
Code CSS :

Exemple de code :
.nonlisse{   filter:alpha(opacity=100);   height:1%;   background-color:#FFFFFF; } div {font-weight:bold;}

Code HTML

Exemple de code :
<div>Texte lissée</div> <div class="nonlisse">Texte non lissé</div>