<button> не работает в IE8

У меня есть несколько кнопок на моем веб-сайте, используя тег кнопки, и при рендеринге в IE8 они не доступны для кликов (щелчок на них не отправляет пользователя на новый URL-адрес). Существуют ли какие-либо решения для исправления этого для IE? Это потому, что я обертываю кнопку в теге? Это потому, что я использую имя класса "button"?

Код:

<a href="product_home.html">
<button class="button green big_button">Learn more</button>
</a>

Ответы

Ответ 1

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

Чтобы узнать больше о правильном использовании <button/>, посетите Справка XHTML: кнопка

Ответ 2

Вы всегда можете использовать Javascript, который работает с перекрестным браузером -

<button onclick="location.href='http://www.google.com'">This is a button to google</button>

Ответ 3

Вы можете попробовать:

<a href="product_home.html" class="button green big_button">Learn more</a>

или поместив кнопку в форму

Ответ 4

Cross Browser - работает в MSIE 8 и FF 24 +

<button onclick="location.href='myscript.php?id=$ID'" type="button">MyLink</button>.

Ответ 5

Смотрите мой другой ответ; Я думаю, что это современный подход на основе jQuery для исправления этой проблемы для старых IE, без искажения вашей красивой чистой разметки.

<!--[if lt IE 9]>

<script type="text/javascript">
// IE8 is the new IE6. Patch up https://stackoverflow.com/questions/2949910/how-to-make-href-will-work-on-button-in-ie8
$('button').click(function(){
    document.location = $(this).parents('a').first().prop('href');
});
</script>

<![endif]-->

Ответ 6

Использование образца:

<form id="myform" name="myform" action="product_home.html">
  <input id="user" name="user" type="text" value="" />
  <button class="button green big_button" type="submit">Learn more</button>
  <button class="button green big_button" type="reset"><b>reset the form!</b></button>
</form>

<script type="text/javascript">

var myform = document.getElementById('myform');

myform.onsubmit = function()
{
    alert(myform.user.value); 
if (myform.user.value != '') return true;
    return false;
}

</script>

Ответ 7

<a href="product_home.html">
<div class="button green big_button">Learn more</div>
</a>