IEでは、tableタグを子要素に持つAタグは画面遷移が発生しない

IE7、IE8、IE9では、Aタグのなかにtableタグがあると、hrefが指すURLへ移動してくれません。
IE6は知らぬ。

サンプルコードは次の通り。HTML4でもHTML5でも同じ結果です。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
  <a href="http://www.google.com/">
    <table>
      <tr>
        <td>押しても無駄</td>
      </tr>
    </table>
  </a>
</body>
</html>

『そもそも何故Aタグの中にtableを入れる？』というのは一先ず置いといて、
ChromeとFirefoxではちゃんとリンクが効きます。IEだけダメ。

というわけで、差し当たりこういうテクで逃げを打ちました。
あとでちゃんと直す。 ←絶対やらない

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<!--[if IE]>
<script type="text/javascript">
$(document).ready(function() {
    $('a:has(table)').click(function() {
        window.location.href = $(this).attr('href');
    });
});
</script>
<![endif]-->
</head>
<body>
  <a href="http://www.google.com/">
    <table>
      <tbody>
        <tr>
          <td>押したら画面遷移</td>
        </tr>
      </tbody>
    </table>
  </a>
</body>
</html>

ブラウザごとの違いがある

これでとりあえず、クリックしたらリンクが効くようにはなったのですが、
デフォルトのtext-decorationが効いたり効かなかったりと、細かいところで差異があります。まとめると次の通り。

IE
- リンクを押しても何も起きない
- デフォルトのtext-decorationが有効（要するにブルーの下線あり）
Firefox
- リンクを押すと画面遷移
- デフォルトのtext-decorationが有効
Chrome
- リンクを押すと画面遷移
- デフォルトのtext-decorationは無効（ブルーの下線ナシ）