Microsoft Edge浏览器无法正确呈现双“框阴影插图”

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，您也可以报告此问题。 another issue report的情况也类似。

您可以尝试避免在Microsoft Edge（EdgeHTML）中使用两个插入框阴影，而将以下代码用作解决方法：

@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>