Привязка к тегу вокруг стола не активна в IE 6, 7 и 8 - PullRequest
Новая
       17

Привязка к тегу вокруг стола не активна в IE 6, 7 и 8

13 голосов
/ 22 сентября 2009

Проблема: при окружении таблицы тегом привязки таблица и все, что внутри нее, не активируются в IE 6, 7 и 8. Как решить эту проблему, если я не могу заменить таблицу на div? *

Пример кода: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">

<head>
  <title>Test</title>
</head>
<body>

<a href="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>

</body>
</html>

Ответы [ 9 ]

9 голосов
/ 22 сентября 2009

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

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

7 голосов
/ 22 сентября 2009

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

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

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

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

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

3 голосов
/ 22 сентября 2009

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

<table height="35">
    <tr>
      <td><a href="http://www.google.com">I&apos;m a link in a table, bet you can click me!</a></td>
    </tr>
</table>
2 голосов
/ 07 ноября 2012

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

<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>
1 голос
/ 17 сентября 2012


Я тоже получил эту проблему сегодня и искал решение, но не смог найти работающего решения. Так что я просто придумал это маленькое решение 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]-->
0 голосов
/ 10 апреля 2015

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

<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, работает, щелкая внутри

0 голосов
/ 27 марта 2014

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

<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;
        });
0 голосов
/ 11 марта 2014

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

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

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

0 голосов
/ 26 февраля 2013

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

Упрощенный 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');
    });
...