Firefox, HTML5 and an anchor bug

I’m sure someone’s named this bug already. And perhaps it’s written up all over the web. But it just affected a site I was working on today and left me scratching my head for a few minutes. In case you run into it, I’d like to confirm to you, “No, you’re not crazy.” (Well, not for this reason anyway.)

Apparently, Firefox has an issue with the ability HTML5 has given us to wrap just about anything in an anchor (one of my favorite features). I find this useful in many situations. Wrapping an anchor around an image and a paragraph/caption (whether I’m using the figure element or not), wrapping the entire contents of a list item, wrapping all headings in an hgroup when used as a logo of sorts, etc. Much of the time, I’m using the declaration “text-decoration: none;” and then using another method to indicate the link. Today though, that changed. I needed this link underlined.

Firefox refuses to show an underline on a link around block level elements

I had a client report today, with an HTML5 site I’m building, that one of the pre-order links wasn’t underlined in Firefox. The anchor, in this case, was wrapped around a paragraph and image. I used Firebug to inspect it. The CSS for the link itself wouldn’t even show up in Firebug (the a:visited state did). I validated the page. All was well. I Inspected with Dreamweaver and the link was underlined as it should be. It was also underlined in webkit browsers and Internet Explorer. WTF?

It finally occurred to me that this link was around block level elements. I created a simple test case and, sure enough, with a heading and paragraph wrapped in an anchor, Firefox refused to show the underline. The answer was found in setting the anchor to display: block. But really Firefox? You’re usually nearly bug-free. Can we get this fixed?