Chrome与Firefox的背景颜色

Question

我试图通过CSS获取按钮的插入效果。在Firefox中，这看起来像第一张图片，在Chrome中就像第二张图片。我不明白为什么以及如何解决这个问题。有人可以给我一些关于发生了什么的暗示吗？感谢。

Firefox

铬

这是标记：

<div id="controls">
  <div class="musicStyles"><span class="btnLetter">S</span>
    <input type="checkbox" class="box"data-value="Classic" data-key="83">
  </div>
</div>

这里是CSS：

.btnLetter {
    font-family: 'Courier New', Courier, monospace;
    font-size: 100px;
    text-align: center;
    display: inline-block;
    margin: -7px 4px 0 0;
    color: transparent;
    background-clip: text;
    text-shadow: 2px 4px 3px  #805235;
    background-color: black ;
    font-weight: bold;   
}

#controls {
    width: 100%;
    height: 200px;
    text-align: center;
    margin-top: 300px;
    position: relative; 
}

Answer 1

问题是chrome无法理解css部分中的background-clip。 所以像这样提供

-webkit-background-clip: text;
-moz-background-clip: text;

而不是

background-clip: text;