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>

我已经尝试使用供应商前缀并尝试分隔 "elements" 但它似乎不起作用。

顺便说一句，位置：置顶；也不行。

告诉我是否必须编写更多代码：我的网页由于定位的原因有点特殊。

Answer 1

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

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

您可以在 CSS 中使用 ::after 和 ::before 来获得相同的结果 effect.They 几乎所有浏览器都支持

Internet Explorer 上的文本修饰

text-decoration on Internet Explorer

css

internet-explorer

text-decorations