13

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

9 回答 9

9

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.

于 2009-09-21T23:41:48.233 回答
7

锚标签内不能有表格，因为表格是块标签，而锚是内联标签。块标签不进入内联标签，因此代码无效。用 div 元素替换表格也不起作用，因为它们也是块元素。

该标准指定了有效代码应该如何工作，但没有指定无效代码应该如何工作。不同的浏览器有不同的方法来充分利用这种情况。在这种情况下，浏览器的另一种选择是将锚点移到表格内，另一种选择是将表格移出锚点。在某些情况下，任何一种方法都会给出预期的结果，但在其他情况下则不然。

将块元素可靠地放入锚点的唯一方法是使用默认为内联元素的元素，并使用 CSS 将两个元素都转换为块元素：

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

该代码是有效的，因为默认情况下两个元素都是内联元素，并且在应用样式后它可以工作，因为块元素可以在另一个块元素内。

于 2009-09-21T23:58:34.327 回答
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>
于 2009-09-21T23:41:13.580 回答
2

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>
于 2012-11-06T21:35:03.303 回答
1


我今天也遇到了这个问题并搜索了修复程序，但找不到有效的解决方案。所以我想出了这个小的 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]-->
于 2012-09-17T14:23:22.733 回答
0

我设法为此找到了解决方案，它并不完美，但它有效：

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

测试页面

另一种方法是在 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');
    });
于 2013-02-26T17:40:23.667 回答
0

如果您足够疯狂地支持 IE 7、8 和 9，那么您应该知道在这些虚拟浏览器中不能在 A 标记中包含 TABLE。

即使在将锚点显示为块元素的情况下也是如此。但是，您可以在锚标签内放置一个 div，这对我来说更加奇怪。

这个问题没有其他解决方案。

于 2014-03-11T15:00:53.593 回答
0

如果你想这样做：

<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 代码，以防浏览器使用jQuery启用 JS，如下所示：

$('.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，可以点击里面

于 2015-04-10T18:26:26.573 回答
0

您可以将 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>

使用点击表格导航到相应的网址 

$('#link').click(function () {
            window.location = $(this).attr('href');
            return false;
        });
于 2014-03-27T09:35:32.777 回答