Anchor tag around table is not clickable in IE 6,

The problem: when surrounding a table with an anchor tag, the table and everything within is not clickable in IE 6, 7 & 8. How do I solve this issue assuming I can't replace the table with divs?

Sample code:

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

标签： xhtml html-table anchor

9条回答

我想做一个坏孩纸

2楼-- · 2019-04-19 06:52

You can't have a table inside an anchor tag, as the table is a block tag and the anchor is an inline tag. Block tags don't go inside inline tags, so the code is invalid. Replacing the table with div elements doesn't work either, as they also are block elements.

The standards specifies how valid code should work, but not how invalid code should work. Different browsers have different methods of making the best of the situation. One alternative for the browser in this case is to move the anchor inside the table, another alternative is to move the table out of the anchor. Either method will give the desired result in some situations but not others.

The only way to reliably put a block element inside an anchor, is to use an element that is an inlinde element by default, and use CSS to turn both elements into block elements:

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

The code is valid as both elements are inline elements by default, and it works after the style is applied as a block element can be inside another block element.

0人赞添加讨论(0) 举报

走好不送

3楼-- · 2019-04-19 06:54

I too got this problem today and searched for a fix, but couldn't find a working solution for it. So I just came up with this small jquery solution. You can modify it as you want. Hope this will give an idea to those of you struggling with this IE7 issue.

<!--[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人赞添加讨论(0) 举报

Bombasti

4楼-- · 2019-04-19 07:02

You can add href attribute directly to table insted of wrapping table in anchor tag.

<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 on click on table for navigating to corrosponding url

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

0人赞添加讨论(0) 举报

Emotional °昔

5楼-- · 2019-04-19 07:03

I've managed to find a solution for this, it's not perfect but it works:

Simplified CSS:

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

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

Test page

Another way is using JavaScript event delegation on all links on IE9 like below:

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

0人赞添加讨论(0) 举报

beautiful°

6楼-- · 2019-04-19 07:06

Here is an alternative solution:

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

0人赞添加讨论(0) 举报

霸刀☆藐视天下

7楼-- · 2019-04-19 07:08

Why not do this?

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

0人赞添加讨论(0) 举报

1 2 下一页