Safari 的 CSS 问题 - 在 h1 内渲染链接，下划线不均匀

Question

我有这样的事情

<h1>
  <a href="/" title="Home">Home</a>
</h1>

非常简单。 IE、FF渲染流畅，下划线效果很好。 Safari 做了我以前从未见过的奇怪的事情，它仅在字体衬线和字体的位置强调“Home”。曲线不要接触下划线，即字母“H”会在两个“柱子”之间添加下划线（我知道听起来很奇怪），并且在这两个接触下划线的地方，后者的颜色会变得更浅（#eee 与 #000）。

更新： 显然，当出现此情况时，Safari 无法很好地呈现链接

 text-shadow: 0px 2px 1px #fff;

是否有特殊原因？

Answer 1

原因是因为文本阴影是在最前面的层渲染的。如果我是你，我会向 h1 a 元素添加一个无下划线的 border-bottom。

 h1 a {
  text-decoration: none;
  border-bottom: 1px solid blue;
 }

当然，将蓝色替换为链接的任何颜色。

编辑：意识到可以使用 span 标签来修复阴影。

我认为使用投影时下划线和基线之间有一点空间看起来更好，但如果您必须有一个 text-decoration: underline 您必须在标记中添加一个 span 元素：

<a href="/" title="Home"><span>Home</span></a>

CSS：

 h1 a span {
  position: relative;
  top: 0px;
  z-index: -100;
 }