Internet Explorer上的文本装饰

时间:2019-02-07 18:39:10

标签: css internet-explorer text-decorations

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

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

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

告诉我是否需要编写更多代码:由于位置的原因,我的网页有些特殊。

1 个答案:

答案 0 :(得分:1)

可以看到,Internet Explorer或Edge都不支持text-decoration

enter image description here

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

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