Ссылка внутри кнопки, не работающей в Firefox

Ответ 1

Это не работает, потому что это запрещено HTML5:

Модель контента: Фразинг контента, но не должно быть интерактивных потомок контента.

Интерактивный контент означает любой из следующих элементов:

аудио (если присутствует атрибут управления), информация о кнопке вставить iframe img (если присутствует атрибут usemap) input (если тип атрибут не находится в скрытом состоянии). Меню ярлыков (если тип атрибут находится в состоянии панели инструментов) (если атрибут usemap present) выберите textarea video (если присутствует атрибут управления)

Если он работает в некоторых браузерах, это просто потому, что они пытаются играйте хорошо с неправильной разметкой и предоставляйте некоторые вид значимого результата.

Другими словами: перепишите свой HTML, это беспорядок. Если вы хотите, чтобы ссылки выглядели так, как будто они находятся в одной кнопке, поместите их в элемент div и стиль, который будет выглядеть как один, вместо того, чтобы злоупотреблять семантически неправильными элементами для него.

Ответ 2

<a> не разрешено внутри <button>

Содержание фраз, но не должно быть потокового потомка для интерактивного контента.

<a> - интерактивный контент (независимо от того, имеет ли он href, по-видимому, но ваш). Таким образом, вы не можете зависеть от того, есть ли ссылки в качестве дочерних элементов кнопки и что делает Firefox правильно. Используйте другой элемент, чтобы содержать <a> s

Ответ 3

У меня есть две ссылки внутри кнопки, но [...]

"Да, но позвольте мне остановить вас прямо там..."

http://www.w3.org/TR/html5/forms.html#the-button-element:

4.10.8 Элемент кнопки. Модель контента: содержание фраз, но не должно быть потокового потомка.

--- >

Интерактивный контент - это контент, специально предназначенный для взаимодействия с пользователем. ⇒ a, audio [...]

Итак, если вы пишете недействительный HTML, ожидайте неожиданного поведения; -)

Ответ 4

Вы можете добавить это в элемент кнопки.

OnClick = "window.location.href= '/link1'"

Пример

<button onclick="window.location.href='/login'">Login</button>

Ответ 5

Этот недопустимый HTML,

Сделайте что-то вроде этого:

<ul>
    <li><a href="#">Log in</a></li>
    <li><a href="#">Sign up</a></li>
</ul>

Ответ 6

Используйте javascript: window.location для кнопки.

<div class="product">
<button onClick="javascript: window.location='/checkout/outfield-
banner/1'">Add to Cart</button>
</div>

Ответ 7

Или вы можете поместить кнопку внутри якоря, у нее не будет такого же взгляда, так как это будут две разные кнопки, но это будет кнопка, которая действует как ссылка. Это еще не технически корректно, но работает в FireFox.

<a href="/login">
  <button class="btn login">
    <b>Log In</b>
  </button>
</a> 
<a href="/signup">
  <button class="btn login">
    <b>Sign Up</b>
  </button>
</a>