Détail du bug css de la css : opacity

Explication de la gestion des bugs css

Définition

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 de bugs css "non vérifiés", ils sont soit sur des navigateurs MAC soit sur un navigateur que je ne possède pas.
Ceux que j'ai pu visualiser sont notés
Bug vérifié : oui

Descendre

Remonter

Bug n°1

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

Descendre

Remonter

Bug n°2

Bug 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)

Descendre

Remonter