Internet Explorer 上的文本装饰答案

【问题标题】：text-decoration on Internet ExplorerInternet Explorer 上的文本装饰
【发布时间】：2019-02-07 18:39:10
【问题描述】：

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

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

顺便说一下，位置：sticky;也不行。

如果我需要编写更多代码，请告诉我：由于定位，我的网页有点特别。

【问题讨论】：

嗨 @Alex 欢迎来到 SO。您已经描述了您所做的工作，但能否更新您的问题以明确您要解决的问题？

标签： css internet-explorer text-decorations

【解决方案1】：

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

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

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

【讨论】：