読者です 読者をやめる 読者になる 読者になる

この日記は私的なものであり、所属会社の見解ではありません。 GitHub: takahashikzn

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

Javascript

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を入れる?』というのは一先ず置いといて、
ChromeFirefoxではちゃんとリンクが効きます。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は無効(ブルーの下線ナシ)