Nesting <a> inside <button> doesn't work in Firefox

I have a <button> with a hyperlink tag inside, looks like this:

<button class="btn"><a href="#"></a></button>

This works well in Chrome and Safari, BUT doesn't work in Firefox (ver 20 tested).

What's wrong?

To make it work in all browser, Firefox too you have to change it to

<a href="#"><button class="btn"></button></a>

or as suggested by Billy Moat in case of bootstrap there was no need of <button> you could just do

<a href="#" class="btn">GO</a>

Probably better to just do this:

<a href="#" class="btn">Go!</a>

This issue is happening in FF and IE(< 10). The browser simply doesn't like the tag button when it's used as a link.

Quick solution in bootstrap is to use and give a class of btn btn-default (or your choice of button style).

However, you can use in a form (submit button for instance) and you shouldn't have an issue.

You can simply use an onclick method instead of changing the HTML structure, if you can't change your structure because of something that doesn't allow you to change(e.g. bootstrap components as list-groups, that's my case hehe) and mainly if you want to put two or more links inside a button:

<button class="btn"><a onclick="location.replace('YOUR_URL_HERE')"></a></button>