css - Internet Explorer 上的文本修饰

Question

我最近编写了一个网站代码，但在某些网络浏览器(例如 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>

我已经尝试使用供应商前缀并尝试分隔“元素”，但它似乎不起作用。

顺便说一下，位置:粘性；也不起作用。

如果我必须编写更多代码，请告诉我:我的网页由于定位的原因有点特别。

Answer 1

如您所见，Internet Explorer 和 Edge 都不支持 text-decoration。

使用此站点检查浏览器对各种属性的支持: https://caniuse.com/#search=text-decoration

您可以在 CSS 中使用::after 和::before 来获得相同的效果。几乎所有浏览器都支持它们