calc ne fonctionne pas ie 11
Après des recherches j'ai confirmé que calc doit travailler pour ie8+, mais il ne fonctionne pas pour moi.
Ici est un JS fiddle j'ai fait:
voici le code:
HTML:
<div id="outer">
<div id="inner">
</div>
</div>
CSS:
#outer{
width:400px;
background-color:black;
height:200px;
}
#inner{
width:calc(80%-100px);
width:expression(80%-100px);
background-color:red;
height:100%;
}
et voici le résultat que je vois:
Ce que je fais mal?
stackoverflow.com/questions/16034397/css-calc-alternative dit d'utiliser
J'ai aussi découvert que
width: expression(100% - 500px);
calc()
n'est pas IE8+, mais IE9+. Réf: caniuse et QuirksmodeJ'ai aussi découvert que
z-index: calc(100 + 1);
et même z-index: calc(101);
sont cassés dans IE11.
OriginalL'auteur Ahmed-Anas | 2014-08-11
Vous devez vous connecter pour publier un commentaire.
"-" doit être entouré par des espaces
width:calc(80% - 100px);
Démo
bizarre façon de faire des maths ^^
Une espace est un tueur sur la calc() de la propriété. À noter également: calc() ne fonctionne pas correctement avec fenêtre d'affichage des unités de vw/vh et un autre type d'unité. c'est à dire: calc(100vw - 25px) ne sera pas rendu, mais calc(100vw - 2vw) serait.
OriginalL'auteur JunM
Démo
width:calc(80%-100px);
changement dewidth:calc(80% - 100px);
(l'espace entre le signe" -")Oui, je sais! J'étais en train de poster la réponse et je ne savais pas que la réponse a déjà été posté..:)
<1 min de différence. N'a sans doute pas remarqué. Va upvote au moins, mais JunM obtient la coche verte :).
ouais, bien sûr..:) @JunM le mérite!
OriginalL'auteur 4dgaurav