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

【问题标题】：CSS problem with Safari - renders link inside h1 with nasty uneven underlineSafari 的 CSS 问题 - 在 h1 内渲染链接，下划线不均匀
【发布时间】：2010-02-22 19:32:37
【问题描述】：

我有这样的事情

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

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

更新：显然 Safari 没有很好地呈现链接

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

这有什么特别的原因吗？

【问题讨论】：

你的 Safari 版本是多少，有 CSS 吗？
我很难相信 Safari 会做任何与众不同的事情

标签： css safari rendering

【解决方案1】：

原因是因为 text-shadow 渲染在最前面的层。如果我是你，我会在 h1 a 元素中添加一个无下划线的边框底部。

 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;
 }

【讨论】：