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

Question

У меня есть две ссылки внутри кнопки, но ссылки, похоже, не работают на Firefox.

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

Я пробовал JavaScript onclick и перенаправлять - даже это не работает.

Answer 1

Это не работает, потому что it is not allowed by HTML5:

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

Interactive content means any of the following elements:

аудио (если атрибут управления присутствует) Описание Кнопки встраивать IFrame IMG (если атрибут usemap присутствует) вход (если атрибут типа не в скрытом состояние) меню кейгена этикетки (если атрибут типа находится в состоянии панели инструментов) объект (если атрибут является usemap присутствует) выберите текстовое поле видео (если атрибут управления присутствует)

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

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

Answer 2

<a> is not allowed inside <button>

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

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

Answer 3

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

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

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

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

--->

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

Так что, если вы пишете недопустимый HTML, ожидать неожиданное поведение ;-)

Answer 4

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

ли что-нибудь подобное вместо:

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

Answer 5

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

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

Пример

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

Answer 6

Или, вы можете поставить кнопку внутри якоря, он не будет иметь точное такой же взгляд, так как это будут две разные кнопки, но это будет кнопка, которая действует как ссылка. Это все еще не технически правильно, но это делает Работает в 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> 

Answer 7

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

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