Вложенность <a>внутри <button> не работает в Firefox

У меня есть <button> с тегом гиперссылки внутри, выглядит так:

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

Это хорошо работает в Chrome и Safari, но не работает в Firefox (проверена версия 20).

Что не так?

Ответ 1

Чтобы заставить его работать во всех браузерах, Firefox тоже нужно изменить его на

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

или, как было предложено Билли Моатом в случае бутстрапа, не было необходимости <button>, вы могли просто сделать

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

Ответ 2

Возможно, лучше просто сделать это:

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

Ответ 3

Эта проблема происходит в FF и IE (< 10). Браузеру просто не нравится кнопка тега, когда она используется в качестве ссылки.

Быстрое решение в bootstrap - использовать класс btn btn по умолчанию (или ваш выбор стиля кнопки).

Однако вы можете использовать его в форме (например, кнопку отправки), и у вас не должно быть проблем.

Ответ 4

Вы можете просто использовать метод onclick вместо изменения структуры HTML, если вы не можете изменить свою структуру из-за того, что не позволяет вам изменять (например, загрузочные компоненты в виде групп-списков, что мое дело хе-хе) и в основном, если вы хотите разместить две или несколько ссылок внутри кнопки:

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