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