Кнопка внутри якорной ссылки работает в Firefox, но не в Internet Explorer?

Ответ 1

У вас не может быть <button> внутри элемента <a>.

"Кнопка интерактивного элемента не должна отображаться как потомок элемента". Источник: http://www.w3.org/TR/html-markup/button.button.html#button.button

Чтобы получить эффект, который вы ищете, вы можете вырезать теги <a> и добавлять простой обработчик событий к каждой кнопке, которая перемещает браузер в нужное место, например.

<input type="button" value="stackoverflow.com" onClick="javascript:location.href = 'http://stackoverflow.com';" />

Пожалуйста, рассмотрите не выполнение этого; есть причина, по которой работают регулярные ссылки:

• Пользователи могут мгновенно распознавать ссылки и понимать, что они переходят на другие страницы
• Поисковые системы могут идентифицировать их как ссылки и следовать им.
• Считыватели экрана могут идентифицировать их как ссылки и соответственно сообщать своим пользователям.

Вы также добавляете совершенно ненужное требование, чтобы включить JavaScript только для базовой навигации; это такой фундаментальный аспект Интернета, что я считаю такую ​​зависимость неприемлемой.

При желании вы можете стилизовать свои ссылки, используя фоновое изображение или цвет фона, границу и другие методы, чтобы они выглядели как кнопки, но под обложками они должны быть обычными ссылками.

Ответ 2

Просто примечание:
W3C не имеет проблем с кнопкой внутри тега ссылки, поэтому это просто еще один подстандарт MS.

Ответ:
Используйте суррогатную кнопку, если вы не хотите идти за полным изображением.

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

Он может быть стилизован, чтобы выглядеть как кнопка или что-то еще.

Он универсален - один кусок кода css управляет всеми экземплярами - просто определите CSS один раз и с этой точки просто скопируйте и вставьте экземпляр html, где ваш код требует его.

Каждая кнопка может иметь свой собственный ярлык - отлично подходит для многоязычных страниц (проще, чем делать снимки для каждого языка - я думаю) - также позволяет проще распространять экземпляры всего вашего script.

Регулирует его ширину до длины метки - также принимает фиксированную ширину, если она вам нравится.
IE7 является исключением выше - он должен иметь ширину или сделать эту кнопку от края до края - альтернативно, чтобы дать ей ширину, вы можете повернуть кнопку слева
- css для IE7:
а..width: 150px; (обратите внимание на точку перед свойством, я обычно нацелен на IE7, добавляя такую ​​точку - удаляем точку, и свойство будет считаться всеми браузерами)
б. выравнивания текста: центр; - если у вас есть фиксированная ширина, вы должны иметь это для центра текста/метки
с. курсор: указатель; - все IE должно иметь это, чтобы показать указатель ссылки правильно - хорошие браузеры не нуждаются в нем

Вы можете сделать шаг вперед с этим кодом и использовать CSS3 для его стилизации вместо использования изображений:
а. радиус для круглых углов (ограничение: IE покажет им квадрат)
б. градиент, чтобы сделать его "кнопкой типа" (ограничение: опера не поддерживает градиенты, поэтому не забудьте установить стандартный цвет фона для этого браузера)
с. use: hover pclass для изменения состояний кнопок в зависимости от положения указателя мыши и т.д. - вы можете применить его только к текстовой метке или целую кнопку

CSS-код ниже:

.button_surrogate span { margin:0; display:block; height:25px; text-align:center; cursor:pointer; .width:150px; background:url(left_button_edge.png) left top no-repeat; }

.button_surrogate span span { display:block; padding:0 14px; height:25px; background:url(right_button_edge.png) right top no-repeat; }

.button_surrogate span span span { display:block; overflow:hidden; padding:5px 0 0 0; background:url(button_connector.png) left top repeat-x; }

HTML-код ниже (экземпляр кнопки):

<a href="#">
  <span class="button_surrogate">
     <span><span><span>YOUR_BUTTON_LABEL</span></span></span>
  </span>
</a>

Ответ 3

$("a > button").live('click', function() { 
    location.href = $(this).closest("a").attr("href");
}); // fixed

Ответ 4

Приведенный ниже код будет работать очень хорошо во всех браузерах:

<button onClick="location.href = 'http://www.google.com'">Go to Google</button>

Ответ 5

У вас не может быть кнопки внутри тега a. Вы можете сделать некоторый javascript, чтобы заставить его работать.

Ответ 6

Если вы используете фреймворк, такой как загрузочный лоток Twitter, вы можете просто добавить класс "btn" к тегу - у меня просто был вызов пользователя по этой проблеме, видимо, моя кнопка проверки не работала, потому что у меня была кнопка внутри тега... вместо этого я просто добавил класс btn к нему, и теперь он отлично работает. Большая ошибка, которая, вероятно, стоит клиентам - и я иногда забываю код, проверяя, что все работает в IE..

например.   <a href="link.com" class="btn" >Checkout</a>

Ответ 7

Я обнаружил, что это работает для меня

<input type="button" value="click me" onclick="window.open('http://someurl', 'targetname');">

Ответ 8

Так как это только проблема в IE, чтобы решить эту проблему, я сначала обнаруживаю, является ли браузер IE, и если да, используйте событие jquery click. Я помещаю этот код в глобальный файл, поэтому он фиксируется на всем сайте.

if (navigator.appName === 'Microsoft Internet Explorer')
{
    $('a input.button').click(function()
    {
        window.location = $(this).closest('a').attr('href');
    });
}

Таким образом, у нас есть только накладные расходы, связанные с назначением событий click для связанных кнопок ввода для IE. Примечание. Вышеприведенный код находится внутри функции готовности документа, чтобы убедиться, что страница полностью загружена, прежде чем назначать события кликов.

Я также назначил имена классов своим кнопкам ввода, чтобы сохранить некоторые накладные расходы при использовании IE, чтобы я мог искать

$('a input.button')

вместо

$('a input[type=button]')

.

<a href="some_link"><input type="button" class="button" value="some value" /></a>

Кроме всего прочего, я также использую CSS, чтобы кнопки выглядели интерактивными, когда ваша мышь нависает над ним:

input.button {cursor: pointer}

Ответ 9

<form:form method="GET" action="home.do"> <input id="Back" class="sub_but" type="submit" value="Back" /> </form:form>

Это прекрасно работает, я тестировал его на IE9.

Ответ 10

Это очень просто, не требуется javascript.

Сначала поставьте якорь внутри кнопки

<button><a href="#">Bar</a></button>

Затем поверните якорный тег в элемент типа блока и заполните его контейнер

button a {
  display:block;
  height:100%;
  width:100%;
}

Наконец, при необходимости добавьте другие стили.

Ответ 11

Проблема здесь в том, что ссылка находится за кнопкой, даже при изменении z-индекса. Эта разметка также недействительна (прочитать спецификацию). Поэтому причина, по которой ссылки не работают, заключается в том, что вы на самом деле нажимаете кнопку, а не ссылку. Решение заключается в изменении разметки.

<button type="button"><a href="yourlink">Link</a></button>

Затем создайте стиль по мере необходимости. Демо здесь.

Ответ 12

просто вставьте этот код jquery в раздел HTML head:

<!--[if lt IE 9 ]>
     <script>
        $(document).ready(function(){
            $('a > button').click(function(){
                window.location.href = $(this).parent().attr('href');
            });
        });
    </script>
<![endif]-->

Ответ 13

Почему бы просто не преобразовать все <button> в <span> с помощью type="button", а затем стиль с помощью обычных классов кнопок css? Просто подтвердил, что это работает в IE11.