可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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>

回答1:

You can add a JavaScript onclick event handler on the table to do the same thing as the link.

Edit: Removed initial suggestion since it behaved badly in other browsers.

回答2:

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.

回答3:

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>

回答4:

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>

回答5:

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

回答6:

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');
    });

回答7:

If you are crazy enough to support IE 7, 8 and 9 at all, you should know that you cannot have a TABLE inside an A tag in these dummy browsers.

This is true even in the case where you make the anchor display like a block element. You can however place a div inside an anchor tag, which for me is even more bizarre.

There are NO other solutions to this problem.

回答8:

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;
        });

回答9:

If you want to do this:

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

First, you have to make an universal code that's work in all browsers without JavaScript like:

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

Now it works when you click items inside the table but no the entire table(but a little works!). Then, you have to apply a final fix JavaScript code in case browser has enable JS using jQuery like this:

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

And now it entirely works, in case browser doesn't have enable JS, works clicking inside