Microsoft Edge 浏览器无法正确呈现双 'box-shadow inset'

Question

请参阅下面使用两个 box-shadow: inset 作为下划线的文本示例片段。

它在 Chrome、Firefox 和 Safari（最新版本）上完美呈现。

但它在 Edge 上看起来像这样（请参阅下划线底部泄漏的褪色线）：

问题

有什么办法解决这个问题吗？或者我应该只给 Edge 用户他们应得的东西？

@import url('https://fonts.googleapis.com/css?family=Proxima+Nova');

h2 {
  font-family: 'Proxima Nova';
  color: rgb(60,128,124);
  font-size: 21px;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 10px;
}

a.boxShadow {
  color: darkGrey;
  text-decoration: none;  
  line-height: 26px;
  
  box-shadow: inset 0 -2px white, inset 0 -4px 0 rgb(60,128,124);
  padding-bottom: 3px;
}

<h2>
  <a class="boxShadow">Hello gjq box-shadow</a>
</h2>

https://gs.statcounter.com/browser-market-share/all/europe/#monthly-201810-201910-bar

Answer 1

我在 Microsoft Edge(EdgeHTML) 中重现了这个问题。我认为这可能是由于不同浏览器的渲染引擎的不同性能。另外，我发现类似issue report, you could also report this issue. The situation of another issue report也是类似的。

您可以尝试避免在 Microsoft Edge(EdgeHTML) 中使用两个 inset box-shadow 并使用下面的代码作为解决方法：

@import url('https://fonts.googleapis.com/css?family=Proxima+Nova');
h2 {
  font-family: 'Proxima Nova';
  color: rgb(60, 128, 124);
  font-size: 21px;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 10px;
}

.boxShadow {
  color: darkGrey;
  text-decoration: none;
  line-height: 26px;
  box-shadow: inset 0 -2px 0 rgb(60, 128, 124);
  padding-bottom: 1px;
}

<h2>
  <a class="boxShadow">Hello gjq box-shadow</a>
</h2>

Microsoft Edge 浏览器无法正确呈现双 'box-shadow inset'

Microsoft Edge browser doesn't render double 'box-shadow inset' properly

css

box-shadow

microsoft-edge