在IE 6、7和8中,表周围的定位标记不可点击。

您可以在表中添加一个javascript onclick事件处理程序,以执行与链接相同的操作。

编辑: 删除了初始建议,因为它在其他浏览器中的行为不好。

锚标记内不能有表,因为表是块标记,锚标记是内联标记。块标记不在内联标记内,因此代码无效。用DIV元素替换表也不起作用,因为它们也是块元素。

标准规定了有效代码应该如何工作,而不是无效代码应该如何工作。不同的浏览器有不同的方法来充分利用这种情况。在这种情况下,浏览器的另一种选择是在表中移动锚点,另一种选择是将表移出锚点。在某些情况下,任何一种方法都会给出所需的结果,但在其他情况下则不会。

可靠地将块元素放入锚定中的唯一方法是使用默认为inlinde元素的元素,并使用css将这两个元素转换为块元素:

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

由于这两个元素在默认情况下都是内联元素,因此代码是有效的,并且在应用样式后,它会起作用,因为块元素可以位于另一个块元素内。

为什么不这样做?

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

这里有一个替代方案:

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

我今天也遇到了这个问题,并搜索了一个修复方法,但找不到有效的解决方法。所以我刚刚想出了这个小的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]-->

我已经设法找到了一个解决方案,它不是完美的,但它是有效的:

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

Test page

另一种方法是对IE9上的所有链接使用javascript事件委托,如下所示:

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

如果你足够疯狂地支持IE7、8和9,那么你应该知道在这些虚拟浏览器中,标签中不能有一个表。

即使在将定位点显示为块元素的情况下也是如此。不过,您可以在锚标记内放置一个DIV,这对我来说更奇怪。

这个问题没有其他解决办法。

您可以直接将href属性添加到锚标记中包装表的insted表中。

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

如果您想这样做:

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

现在,当您单击表中的项目时,它就可以工作了,但不包括整个表(但有一点可以工作!)然后,如果浏览器启用了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,可以点击内部