Посилання всередині кнопки не працює в Firefox

У мене є дві посилання в одній кнопці, але посилання, здається, не працюють на Firefox.

<button class="btn login">
    Log In 
          | 
Sign Up
</button>

Я спробував JavaScript натискання та перенаправлення - навіть це не працює.

26
мама мія .. ось я йду знову ... чому ти коли-небудь дозволив цю розмітку ... :)
додано Автор naveen, джерело
Ні - ви не можете мати "інтерактивні" елементи всередині інших. Іноді це може працювати в деяких браузерах, але це неправильно.
додано Автор Pointy, джерело

7 Відповіді

Це не спрацьовує, оскільки заборонено за допомогою HTML5 :

Модель вмісту: виражає вміст, але інтерактивний вміст не повинен бути   вміст нащадок.

Interactive content means any of the following elements:

Звук (якщо присутній атрибут керування) вставляються деталі кнопки   iframe img (якщо є атрибут usemap) input (якщо тип   атрибут не знаходиться в прихованому стані) keygen language label (якщо тип   атрибут знаходиться в стані панелі інструментів) об'єкт (якщо атрибут usemap є   подарунок) виділіть текстове відео (якщо є атрибут керування)

Якщо він працює в деяких браузерах, це просто тому, що вони намагаються грайте приємно з неправильною розміткою та надайте деяким свого роду суттєвий результат.

Іншими словами: перепишіть ваш HTML, це безлад. Якщо ви хочете, щоб посилання виглядали так, як вони знаходяться в кнопці, помістіть їх у елемент і код стилю div , щоб він виглядав як один, а не зловживання семантично неправильними елементами для нього.

46
додано
@ deji неправильно - інтерактивний вміст ніколи не був дозволений. Текст та зображення не є інтерактивними.
додано Автор Niels Keurentjes, джерело
Можливо, роз'яснимо, пояснивши, коли і чому від кнопки <button> з'явилися альтернативи <input> s з кнопкою type =, яка підтримує зображення та текст (а отже, посилання) всередині HTML 5, змінюючи щось, що раніше працювало?
додано Автор Deji, джерело

is not allowed inside <button>

Форматування вмісту, але інтерактивний вміст не повинен бути нащадком.

is interactive content (regardless of whether it has an href apparently, but yours do). Thus you can't depend on having the links as children of the button and what Firefox is doing is correct. Use another element to contain the s

11
додано

В одній кнопці є дві посилання, але [...]

"Так, але дозвольте мені зупинити вас тут ..."

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

4.10.8 The button element Content model: Phrasing content, but there must be no interactive content descendant.

--->

Interactive content is content that is specifically intended for user interaction. ⇒ a, audio […]

Отже, якщо ви пишете неправильний HTML, очікуйте непередбачувану поведінку ;-)

6
додано
+1: я б закінчив цю пропозицію з "очікувати несподіваного" :)
додано Автор naveen, джерело

Ви можете додати це в елемент кнопки.

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

Приклад

<button onclick = "window.location.href = '/ login'"> Увійти </button>

4
додано

Або ви можете поставити кнопку всередині якоря, вона не матиме точно такого ж вигляду, оскільки вона буде двома різними кнопками, але це буде кнопка, яка діє як посилання. Це все ще не є технічно правильним, але працює в FireFox.


  <button class="btn login">
    Log In </button>  

  <button class="btn login">
    Sign Up </button> 
3
додано

Використовуйте функцію javascript: window.location для кнопки.

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

Це неправильний HTML-код

Замість цього виконайте щось подібне:



0
додано
вже запропонований Нільсом
додано Автор John Dvorak, джерело
ІТ КПІ - JavaScript
ІТ КПІ - JavaScript
504 учасників

співтовариство javascript розробників в Telegram