h1 { font-family: "Comic Sans MS", "Comic Sans", cursive; text-align: center; letter-spacing: 0.5px; font-size: 2.4rem; background-image: -webkit-linear-gradient(left, rgb(140, 198, 63), rgb(0, 185, 245)); background-image: -moz-linear-gradient(left, rgb(140, 198, 63), rgb(0, 185, 245)); background-image: -ms-linear-gradient(left, rgb(140, 198, 63), rgb(0, 185, 245)); background-image: -o-linear-gradient(left, rgb(140, 198, 63), rgb(0, 185, 245)); background-image: linear-gradient(to right, rgb(140, 198, 63), rgb(0, 185, 245)); background-clip: content-box; -webkit-background-clip: text; color: transparent; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: white; -moz-text-stroke-width: 2px; -moz-text-stroke-color: white; -ms-text-stroke-width: 2px; -ms-text-stroke-color: white; -o-text-stroke-width: 2px; -o-text-stroke-color: white; text-stroke-width: 2px; text-stroke-color: white; }
<h1>Heading.. Appears good in Chrome but not in IE :( </h1>
Above is the HTML and CSS code. The code works good in Google Chrome. But the same code doesn't work in Internet Explorer - 10,11,Edge. I suspect the error is in background-clip. Please help.
The problem here is -webkit-text-stroke-width: 2px;
is only supported in Edge.
IE11 and below doesn't support text-stroke
and text-fill
.
For further reading check this aricle .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.