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

首先：在块级元素周围放置<a>在HTML5中有效！请查看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>

Test page

Answer 4

它应该不起作用。 IE在那里有正确的行为。表是块级元素;链接是内联元素。内联元素可能不包含块级元素。

如果您想要点击您的元素来更改页面，您可能需要Javascript。但是，改变CSS应该不难：:hover伪选择器仍然适用于table元素。

将表放在超链接中 - 不在IE中工作

4 个答案:

简化CSS：

简化HTML：