CSS problem with Safari - renders link inside h1 with nasty uneven underline

Question

I have something like this

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

Very simple. IE, FF render it smoothly, underline works fine. Safari does this weird thing I've never seen before, it underlines "Home" only where the font serifs & curves DONT touch the underline, i.e. the letter "H" would get underline between the two "pillars" (sounds weird i know), and where those two touch the underline, the latter becomes much lighter in color (#eee vs #000).

UPDATE: Apparently Safari's not rendering the link well when there's

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

Is there a particular reason for this?

Answer 1

The reason is because the text-shadow is rendered on the frontmost layer. If I were you I'd add a border-bottom to the h1 a element with no text underline.

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

Of course, replace blue with whatever colour your links are.

Edit: Realized that the shadow could be fixed with a span tag.

I think having a bit of space between the underline and the baseline when using the drop shadow looks better, but if you must have a text-decoration: underline you would have to add a span element to your markup:

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

CSS:

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