Question

问题：当围绕一个带有锚标签的桌子时，该表及其中的所有内容都无法在IE 6,7＆amp; 8.如果我不能用div替换表，我该如何解决这个问题？

示例代码：

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

Answer 1

您可以在表格上添加JavaScript onclick事件处理程序，以执行与链接相同的操作。

编辑：删除了初步建议，因为它在其他浏览器中表现不佳。

Answer 2

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

标准规定了有效代码的工作方式，但不指定无效代码的工作方式。不同的浏览器有不同的方法来充分利用这种情况。在这种情况下，浏览器的一种替代方法是将锚移动到表内，另一种方法是将表移出锚。这两种方法都会在某些情况下产生预期效果，但在其他情况下则不会。

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

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

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

Answer 3

为什么不这样做？

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

Answer 4

这是另一种解决方案：

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

Answer 5

我今天也遇到了这个问题并寻找了解决方案，但找不到适合它的解决方案。所以我想出了这个小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]-->

Answer 6

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

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

Answer 7

如果你疯狂到足以支持IE 7,8和9，你应该知道在这些虚拟浏览器中你不能在A标签中有一个TABLE。

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

此问题没有其他解决办法。

Answer 8

您可以直接将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;
        });

Answer 9

如果你想这样做：

<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，可以点击内部工作

在IE 6,7＆amp;中，桌子周围的锚标签不可点击。 8

9 个答案:

简化CSS：

简化HTML：