1
Css calc ne fonctionne pas dans IE11 avec un gradient linéaire
*{
margin:0; padding: 0;
}
body {
background-color: orangered;
}
.content {
margin-top: 200px;
height: 100vh;
background-color: #fdfdff;
}
.tilt {
position: relative;
}
.tilt:before {
content: '';
padding-top: 8.74887%;
position: absolute;
left: 0;
right: 0;
bottom: 100%;
background-image: linear-gradient(5deg, #fdfdff calc(50% - 1px), transparent 50%);
}<div class="content tilt">
</div>Il semble que IE11 a des problèmes understanting calc() propriété css.
J'utilise calc avec gradient linéaire de cette manière:
background-image: linear-gradient(5deg, #fdfdff calc(50% - 1px), transparent 50%);
Mais quand je l'utilise comme ceci:
background-image: linear-gradient(5deg, #fdfdff, transparent 50%);
Il fonctionne sans problème.
Et il y a encore une chose que je ne comprends pas. Lorsque j'inspecte cette propriété dans IE11, éteignez-le et de nouveau sur cela fonctionne.
Le point d'utilisation de calc (50% - 1px) est que l'angle semble plus lisse, c'est tout.
Des suggestions?
IE est un peu compliqué avec l'héritage de valeur de calc. De quoi hérite-t-elle 50%? Une démo plus complète, comme une [mcve] serait utile. – TylerH
J'ai ajouté et donné un exemple à la publication. J'espère que ça aide. – wired
Par Caniuse.com, il semble que IE11 ne supporte pas 'calc' correctement dans le contenu généré (qui inclut :: before/:: after pseudo-éléments) – TylerH