Fix for wrapping block content with anchor tags in Firefox >=3.5

Anchor tags have historically only been allowed to contain inline content.

HTML5 specifically allows for anchor tags to contain block-level content, and modern versions of Opera/Chrome/Safari implement this behavior correctly, but Firefox does not.

This problem has been previously identified by others on SO and probably the best fix is to only include default-inline tags inside of anchor tags, and then making them display:block within the CSS开发者_StackOverflow, but this disallows use of the new html5 tags inside of anchors.

Does anyone have a Firefox-specific fix that allows the following to be rendered in Firefox correctly?

<a href="some/page.html">
   <article>
      <section>
         <p> Lorem ipsum... </p>
      </section>
      ...
   </article>
</a>

If there is a better way to structure the html such that the same end is achieved, that would be ideal, but a CSS-based solution or even vanilla Javascript solution would be great.

Obviously there are many ways to make a div clickable as a link using Javascript and onclick but this hides the link target and loses some of the semantic value of the markup.

Just use some unobtrusive javascript to add an onClick handler to the anchor elements with display: block containing block elements. Don't edit your HTML5.

FYI, this is fixed in Firefox 4 betas (A full HTML5 parser is implemented.)

One way to hack this to work is to wrap the content inside the anchor with a span element. So your code would look like this:

<a href="some/page.html">
   <span>
       <article>
          <section>
             <p> Lorem ipsum... </p>
          </section>
          ...
       </article>
    </span>
</a>

This, of course, is not valid HTML5 anymore but if you really need to get this to work, this hack should do it.