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

HtmlFirefox

Html Problem Overview

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?

Html Solutions

Solution 1 - Html

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>

Solution 2 - Html

Probably better to just do this:

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

Solution 3 - Html

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

Solution 4 - Html

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>

Solution 5 - Html

In case you are using wordpress wp_loginout function. This function create a link for login/logout to nest the link inside a button for styling eg: using btn btn-primary just replace the <button> tag it with a <span> tag

<span class="btn btn-primary"><?php wp_loginout($_SERVER["REQUEST_URI"] ); ?></span>

Solution 6 - Html

This worked for me to retain bookstrap btn-group stylings:

<button class="btn btn-default" onclick="location.replace('YOUR_URL_HERE')">Click Me</button>
Categories
Recommended Html Solutions
Recommended Firefox Solutions

Previous Solution:

Different RESTful representations of the same resource

HttpUrlWeb ApplicationsRest

Next Solution:

How to check for default DateTime value?

C#.NetDesign Patterns

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestioncjmlingView Question on Stackoverflow
Solution 1 - HtmlcjmlingView Answer on Stackoverflow
Solution 2 - HtmlBilly MoatView Answer on Stackoverflow
Solution 3 - HtmlToTechView Answer on Stackoverflow
Solution 4 - HtmlMatheus MontenegroView Answer on Stackoverflow
Solution 5 - HtmlMerlinView Answer on Stackoverflow
Solution 6 - HtmlRogerView Answer on Stackoverflow