A tag âncora ao redor da tabela não é clicável no IE 6, 7 e 8

StackOverflow https://stackoverflow.com/questions/1457439

  •  12-09-2019
  •  | 
  •  

Pergunta

O problema:ao cercar uma tabela com uma tag âncora, a tabela e tudo dentro dela não podem ser clicados no IE 6, 7 e 8.Como resolvo esse problema presumindo que não posso substituir a tabela por divs?

Código de amostra:

<!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>
Foi útil?

Solução

Você pode adicionar um manipulador de eventos onclick JavaScript na tabela para fazer a mesma coisa que o link.

Editar: Sugestão inicial removida porque ela se comportava mal em outros navegadores.

Outras dicas

Você não pode ter uma tabela dentro de uma tag âncora, pois a tabela é uma tag de bloco e a âncora é uma tag inline.As tags de bloco não ficam dentro das tags inline, portanto o código é inválido.Substituir a tabela por elementos div também não funciona, pois também são elementos de bloco.

Os padrões especificam como o código válido deve funcionar, mas não como o código inválido deve funcionar.Diferentes navegadores têm métodos diferentes para tirar o melhor proveito da situação.Uma alternativa para o navegador neste caso é mover a âncora para dentro da tabela, outra alternativa é mover a tabela para fora da âncora.Qualquer método dará o resultado desejado em algumas situações, mas não em outras.

A única maneira de colocar com segurança um elemento de bloco dentro de uma âncora é usar um elemento que seja um elemento inlinde por padrão e usar CSS para transformar ambos os elementos em elementos de bloco:

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

O código é válido porque ambos os elementos são elementos embutidos por padrão e funciona depois que o estilo é aplicado, pois um elemento de bloco pode estar dentro de outro elemento de bloco.

Por que não fazer isso?

<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>

Aqui está uma solução alternativa:

<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>


Eu também tive esse problema hoje e procurei uma solução, mas não consegui encontrar uma solução funcional para ele.Então, acabei de criar esta pequena solução jquery.Você pode modificá-lo como quiser.Espero que isso dê uma ideia para aqueles que estão lutando com esse problema do 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]-->

Consegui encontrar uma solução para isso, não é perfeita, mas funciona:

CSS simplificado:

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

HTML simplificado:

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

Página de teste

Outra maneira é usar a delegação de eventos JavaScript em todos os links do IE9, como abaixo:

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

Se você é louco o suficiente para suportar o IE 7, 8 e 9, você deve saber que não pode ter uma TABLE dentro de uma tag A nesses navegadores fictícios.

Isso é verdade mesmo no caso em que você faz a âncora ser exibida como um elemento de bloco.No entanto, você pode colocar uma div dentro de uma tag âncora, o que para mim é ainda mais bizarro.

NÃO há outras soluções para este problema.

Você pode adicionar o atributo href diretamente à tabela, em vez de agrupar a tabela na tag âncora.

<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>

use ao clicar na tabela para navegar para o URL correspondente 

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

Se você quiser fazer isso:

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

Primeiro, você precisa criar um código universal que funcione em todos os navegadores sem JavaScript, como:

<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>

Agora funciona quando você clica em itens dentro da tabela, mas não na tabela inteira (mas funciona um pouco!).Então, você deve aplicar um código JavaScript de correção final caso o navegador tenha habilitado JS usando jQuery assim:

$('.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

E agora funciona inteiramente, caso o navegador não tenha JS habilitado, funciona clicando dentro

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top