Якорный тег вокруг таблицы не доступен для просмотра в IE 6, 7 и 8

Ответ 1

Вы можете добавить обработчик события onclick JavaScript в таблицу, чтобы сделать то же самое, что и ссылка.

Изменить: Удалено начальное предложение, так как оно плохо себя ведет в других браузерах.

Ответ 2

У вас не может быть таблицы внутри тега привязки, поскольку таблица является блочным тегом, а привязка - встроенным тегом. Теги блока не входят в встроенные теги, поэтому код недействителен. Замена таблицы на элементы div также не работает, так как они также являются элементами блока.

Стандарты определяют, как должен работать действительный код, но не как недействительный код должен работать. У разных браузеров есть разные способы сделать лучшее из ситуации. В этом случае одной из альтернатив для браузера является перемещение якоря внутри таблицы, другой альтернативой является перемещение таблицы из привязки. Любой метод даст желаемый результат в некоторых ситуациях, но не в других.

Единственный способ надежно разместить элемент блока внутри привязки - использовать элемент, который является элементом inlinde по умолчанию, и использовать CSS для превращения обоих элементов в элементы блока:

<a href="http://www.guffa.com" style="display:block;">
  <span style="display:block;">Eat me</span>
</a>

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

Ответ 3

Почему бы не сделать это?

<table height="35">
    <tr>
      <td><a href="http://www.google.com">I'm a link in a table, bet you can click me!</a></td>
    </tr>
</table>

Ответ 4

Вот альтернативное решение:

<a href='#' onclick="location='http://www.google.com'" >
  <table height="35">
    <tr>
      <td>I'm a link in a table, bet you can'tclick me!</td>
    </tr>
  </table>
</a>

Ответ 5

У меня тоже появилась эта проблема сегодня и искал исправление, но не смог найти для нее рабочего решения. Поэтому я просто придумал это маленькое решение для jQuery. Вы можете изменить его, как хотите. Надеюсь, это даст идею тем, кто борется с этой проблемой IE7.

<!--[if lt IE 10]>
<script type="text/javascript">
  $(document).ready(function(){
      $('a').each(function(){
         if($(this).children().length != 0){
             $(this).click(function(){
               var url = $(this).attr('href');
               window.location = url;
             });
          }
       });
   });
</script>
<![endif]-->

Ответ 6

Мне удалось найти решение для этого, оно не идеально, но оно работает:

Упрощенный CSS:

a{ display:inline-block; position:relative; }
a:after{ content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url('x'); }

Упрощенный HTML:

<a href='http://dropthebit.com' target='_blank'>
    <table>
      <tr>
        <td>cell 1</td>
        <td>cell 2</td>
        <td>cell 3</td>
      </tr>
    </table>
</a>

Страница тестирования

Другим способом является использование делегирования событий JavaScript во всех ссылках на IE9, как показано ниже:

if( !('placeholder' in document.createElement('input')) ) // IE9 and below
    $(document).on('click.ie', 'a', function(){ // bind a delegated event
        window.location = $(this).prop('href');
    });

Ответ 7

Если вы достаточно сумасшедшие, чтобы поддерживать IE 7, 8 и 9 вообще, вы должны знать, что у вас не может быть ТАБЛИЦА внутри тега A в этих фиктивных браузерах.

Это справедливо даже в том случае, если вы делаете привязку как элемент блока. Однако вы можете поместить div внутри метки привязки, которая для меня еще более странная.

НЕТ других решений этой проблемы.

Ответ 8

Вы можете добавить атрибут href непосредственно в таблицу insted of wrapping table в теге привязки.

<table height="35" href="http://www.google.com" id="link">
    <tr>
      <td>I'm a link in a table, bet you can'tclick me!</td>
    </tr>
  </table>

использовать при щелчке по таблице для перехода на URL-адрес, вызывающий коррозию.

$('#link').click(function () {
            window.location = $(this).attr('href');
            return false;
        });

Ответ 9

Если вы хотите сделать это:

<a href="domain.com/page.htm">
<table><tr><td>Hello World!</td><td><img src="image.jpg"></td></tr></table>
</a>

Во-первых, вы должны сделать универсальный код, который работает во всех браузерах без JavaScript:

<table class="fixlink">
<tr><td>
<a href="domain.com/page.htm">Hello World!</a>
</td><td>
<a href="domain.com/page.htm"><img src="image.jpg"></a>
</td></tr>
</table>

Теперь он работает, когда вы нажимаете элементы внутри таблицы, но не всю таблицу (но немного работает!). Затем вы должны применить окончательный код JavaScript для исправления, если браузер разрешил JS, используя jQuery следующим образом:

$('.fixlink').each(function() {
    var a = $(this);
    var b = a.find('a').eq(0)
    var c = b.attr('href');
    var d = b.attr('target');
    if(typeof d === 'undefined'){d='_self'};
    a.click(function(){
        window.open(c, d);
        });
    a.css({'cursor':'pointer'});
    a.find('a').contents().unwrap();
    });// fixlink

И теперь он полностью работает, если браузер не имеет разрешения JS, работает нажатие внутри