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

Question

Все остальное на моем сайте совместимо со всеми браузерами, кроме моих ссылок. Они появляются на странице, но они не работают. Мой код для ссылок следующий -

<td bgcolor="#ffffff" height="370" valign="top" width="165">
    <p>
        <a href="sc3.html">
            <button style="width:120;height:25">Super Chem #3</button>
        </a> 
        <a href="91hollywood.html">
            <button style="width:120;height:25">91 Hollywood</button>
        </a> 
        <a href="sbubba.html">
            <button style="width:120;height:25">Super Bubba</button>
        </a> 
        <a href="afgoohash.html">
            <button style="width:120;height:25">Afgoo Hash</button>
        </a> 
        <a href="superjack.html">
            <button style="width:120;height:25">Super Jack</button>
        </a> 
        <a href="sog.html">
            <button style="width:120;height:25">Sugar OG</button>
        </a> 
        <a href="91pk91.html">
            <button style="width:120;height:25">91 x PK</button>
        </a> 
        <a href="jedi1.html">
            <button style="width:120;height:25">Jedi</button>
        </a>
    </p>
    <p>&nbsp;</p>
    <a href="http://indynile99.blogspot.com">
        <button style="width:120;height:25">Blog</button>
    </a>
    <p>&nbsp;</p>
</td>

Answer 1

Вы не можете иметь <button> внутри элемента <a>. Как и описание модели содержимого W3 для элемента <a>:

"не должно быть потомка интерактивного контента."

(a <button> считается интерактивный контент )

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

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

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

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

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

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

Answer 2

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

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

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

Он может быть оформлен в виде кнопки или чего-то еще.

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

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

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

Вы можете сделать шаг вперед с этим кодом и использовать CSS3 для его стилизации вместо использования изображений:
а. радиус для круглых углов (ограничение: IE покажет их квадрат)
б. Градиент, чтобы сделать его «похожим на кнопку» (ограничение: опера не поддерживает градиенты, поэтому не забудьте установить стандартный цвет фона для этого браузера)
с. используйте: 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>

Answer 3

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

Answer 4

Код ниже будет отлично работать во всех браузерах:

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

Answer 5

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

Answer 6

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

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

Answer 7

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

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

Таким образом, у нас есть только накладные расходы по назначению событий щелчка для связанных кнопок ввода для 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}

Answer 8

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

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

Answer 9

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

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

Answer 10

На самом деле это очень просто, JavaScript не требуется.

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

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

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

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

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