我最近编码了一个网站,但在某些网络浏览器(例如Internet Explorer甚至Microsoft Edge)上却遇到了一些问题。我进行了搜索,但找不到任何东西。这是我的CSS代码:
.container {
width: 70%;
position: relative;
left: 47.5%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-o-transform: translateX(-50%);
-ms-transform: translateX(-50%);
background: white;
margin-top: -450px;
}
article {
text-align: justify;
width: 80%;
margin-left: 25%;
color: #666;
margin-bottom: 140px;
}
.grand_titre_section {
font-size: 50px;
font-family: honey;
text-decoration: underline overline dotted orange;
-webkit-text-decoration: underline overline dotted orange;
-moz-text-decoration: underline overline dotted orange;
-o-text-decoration: underline overline dotted orange;
-ms-text-decoration: underline overline dotted orange;
position: sticky;
position: -webkit-sticky;
position: -moz-sticky;
position: -o-sticky;
position: -ms-sticky;
text-decoration-color: orange;
text-decoration-style: dotted;
text-decoration-line: overline underline;
top: 99px;
background: white;
z-index: 10000;
padding: 20px 0px 10px 0px;
}
和HTML代码:
<div class="container">
<article>
<div class="grand1" id="grand1">
<p class="grand_titre_section">Big title</p>
<!-- other elements of the div -->
</div>
</article>
</div>
我已经尝试使用供应商前缀并尝试分隔“元素”,但是它似乎不起作用。
顺便说一下,位置:粘性;也不起作用。
告诉我是否需要编写更多代码:由于位置的原因,我的网页有些特殊。
答案 0 :(得分:1)
可以看到,Internet Explorer或Edge都不支持text-decoration
。
使用此网站来检查浏览器对各种属性的支持: https://caniuse.com/#search=text-decoration
您可以在CSS中使用:: after和:: before来获得相同的效果。几乎所有浏览器都支持它们