将表格放入超链接中-在IE中不起作用

Question

我在超链接中有一个表：

<a href="/"><table><tr><td>...</td></tr></table></a>

在所有浏览器中，将鼠标悬停在表格上会将指针更改为手形，并且通过一些CSS，表格背景会改变颜色(因此它看起来“突出显示”)。

但是，在Internet Explorer中，单击表没有任何效果。在Firefox和Chrome中，它会像预期的那样跟随超链接。

如何让IE在点击时跟随链接？

Answer 1

你不能在内联元素中嵌套块级别的元素并期望得到正确的结果(在这里插入引用)。

您可以将一些CSS样式添加到表中，并应用一个onclick处理程序，这样它就像一个超链接：

<table style="fakeLink" onclick="window.location = '/';">...

和fakeLink类：

.fakeLink
{
  color: blue;
  border-color: blue;
  cursor: pointer;
  text-decoration: underline; /* Not sure if this is possible. */
}

以及演示这两种技术的演示：http://jsfiddle.net/qNGrp/4/。我没有IE，但我想只有一个可以正常工作。

Answer 2

首先:在HTML5中，在块级元素周围放置<a>是有效的！检查http://validator.w3.org/上的以下代码

第二:任何JavaScript变通方法都会降低可访问性，因此这不是最好的做法;-)

我的解决方案是:使用<div>代替<table> -如下所示：

<!DOCTYPE html>
<html>
<head>
<title>MSIE sucks!</title>
</head>
<body>
<a href="javascript:alert('Yeah!')">
<table>
<tr>
<td>&lt;table&gt; Doesn't work in Internet Explorer 8 :-(</td>
</tr>
</table>
<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell">Solution: &lt;div style=&quot;display:table&quot;&gt;</div>
</div>
</div>
</a>
</body>
</html>

Answer 3

我已经找到了一个解决方案，它不是完美的，但它是有效的：

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