Question

我在网站上添加了一些使用w3schools代码的链接按钮。在Internet Explorer they look fine中测试它们，但在Firefox和Chrome上text seems to have disappeared。

这是我的代码:(我有点新，所以不要苛刻）（由于某种原因，stackoverflow剥离了我的一半html代码。这是pastebin www.pastebin.com/raw/H50UgpCB）

如果管理员将此格式化，那么

ps会很好。

<!DOCTYPE html>
<html>
    <head>
    <span id="chromeFix"></span> 
        <title>FivosM Projects</title>
        <link rel="stylesheet" href="animate.css">

        <script src="//use.edgefonts.net/source-sans-pro:n4.js"></script>
            <style>

                body {
                    font-family: source-sans-pro, sans-serif;
                    text-align: center;
                }
                h1, p, h3 {
                    background: -webkit-linear-gradient(#000000, #000000);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;   
                }
                a:link, a:visited {
                    background-color: #f44336;
                    color: blue;
                    padding: 3px 6px;
                    text-align: center; 
                    text-decoration: none;
                    display: inline-block;
                }

                a:hover, a:active {
                    background-color: red;
                }
        </style>
    </head>

        <script type="text/javascript" charset="utf-8">

            $(function() { $('body').hide().show(); });
        </script>

  <body>
      <div class = "body animated bounceInDown">
            <h1 class="bounce">My Projects: </h1>
            <h3> Software: </h3>
            <p><b>Pinger:</b> <a href="google.com" target="_blank"> Download </a> &nbsp; <a href="google.com" target="_blank"> Github </a></p>
            <h3> Games: </h3>
            <p><b>HellBlocks:</b> <a href="google.com"> Itch.io page </a></p>
      </div>
  </body>
</html>

感谢您的帮助！

Answer 1

原因可能是您编码：

-webkit-text-fill-color: transparent;

将其更改为-webkit-text-fill-color: red;并查看其功能。

https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-fill-color

Answer 2

由于某种原因，Edge不喜欢4px以上的阴影

转换此内容：

.shadow {
     text-shadow: 2px 2px 10px #d3d3d3;
 }

对此：

.shadow {
     text-shadow: 2px 2px 4px #d3d3d3;
 }

修正了一切......我仍然不知道为什么会发生这种情况，也许这是我边缘客户的烦恼。

Answer 3

中的罪魁祸首似乎是-webkit-text-fill-color: transparent;

h1, p, h3 {
   background: -webkit-linear-gradient(#000000, #000000);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;   
}

编辑：这是有道理的，因为IE不支持-webkit-text-fill-color（see here）。

文本未出现在链接按钮html中

3 个答案: