web-dev-qa-db-fra.com

L'opacité CSS ne fonctionne pas dans IE11

J'essaie de rendre le background-color d'une tr opaque avec ce CSS:

.faded{
    background-color: red;
    height: 100px;
    opacity: 0.4;
    filter: alpha(opacity=50);
}

Voici mon test HTML:

<table>
    <tr class="faded">
        <td><div>testtesttesttestt</div></td>
        <td><div>testtsttesttesttt</div></td>
    </tr>
</table>

Tout fonctionne bien dans IE9,10 FF24 Chrome 31+, mais pas dans IE11. S'il vous plaît gardez à l'esprit que je ne me soucie pas du contenu des lignes du tableau, seulement de l'opacité de l'arrière-plan. Captures d'écran et Jsfiddle ci-dessous.

IE10: IE10

IE11: IE11

http://jsfiddle.net/ZB3CN/6/

Alors, qu'est-ce qui se passe ici?

EDIT: J'ai envoyé un rapport de bogue à Microsoft:https://connect.Microsoft.com/IE/feedback/details/868842/ie-11-setting-css-opacity-on-a- table-ligne-ne-affecte-pas-la-couleur-fond-de-cette-ligne

EDIT 2: Ce bogue a été confirmé par Microsoft

EDIT 3: Microsoft a déplacé ce bogue vers un nouvel emplacement:https://developer.Microsoft.com/en-us/Microsoft-Edge/platform/issues/212446/

htmlcssinternet-explorerinternet-explorer-11
11
ToastyMallows

Cela semble être encore un autre bogue IE. En guise de solution de contournement, vous pouvez ajouter la variable opacity via la propriété background avec une couleur rgba(). Ensuite, ajoutez simplement l'opacité à l'élément td.

Exemple mis à jour - les résultats semblent cohérents d'un navigateur à l'autre.

.faded {
    background-color: rgba(255, 0, 0, 0.4);
    height: 100px;
}
td {
    opacity:0.4
}
14
Josh Crozier

Si quelqu'un d'autre a un problème, cela m'a aidé:

.foo {
  opacity: 0.4;
  position: relative; /* for IE */
}

Plus d'informations

4
michal

ajoutez cette ligne à la tête de votre code HTML, et l'opacité fonctionnera correctement

<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
1
JSON