周围表锚标签不在IE 6,7和8可点击(Anchor tag around table is not

2019-08-08 15:25发布

问题是:围绕一个表,一个锚标记,表,一切内时无法点击在IE 6,7和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>

测试页


另一种方法是使用JavaScript事件代表团像下面IE9上的所有链接:

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的一切,你应该知道,你不能有一个表内的这些虚拟浏览器的标签。

这甚至在你做锚显示像块元素的情况下也是如此。 然而,你可以把一个div一个锚标记,这对我来说更离奇内。

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



Answer 8:

您可以添加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>

上点击使用上表导航到corrosponding网址

$('#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代码能够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,作品里面点击



文章来源: Anchor tag around table is not clickable in IE 6, 7 & 8