13

問題：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>
4

9 に答える 9

9

テーブルにJavaScriptonclickイベントハンドラーを追加して、リンクと同じことを行うことができます。

編集：他のブラウザでの動作が悪いため、最初の提案を削除しました。

于 2009-09-21T23:41:48.233 に答える
7

テーブルはブロックタグであり、アンカーはインラインタグであるため、アンカータグ内にテーブルを含めることはできません。ブロックタグはインラインタグ内に入らないため、コードは無効です。テーブルをdiv要素に置き換えることも、ブロック要素であるため機能しません。

規格は、有効なコードがどのように機能するかを指定していますが、無効なコードがどのように機能するかは指定していません。ブラウザが異なれば、状況を最大限に活用する方法も異なります。この場合のブラウザの代替手段の1つは、テーブル内でアンカーを移動することです。別の代替手段は、テーブルをアンカーから移動することです。どちらの方法でも、状況によっては望ましい結果が得られますが、他の状況では得られません。

ブロック要素をアンカー内に確実に配置する唯一の方法は、デフォルトでinlinde要素である要素を使用し、CSSを使用して両方の要素をブロック要素に変換することです。

<a href="http://www.guffa.com" style="display:block;">
  <span style="display:block;">Eat me</span>
</a>

コードは両方の要素がデフォルトでインライン要素であるため有効であり、ブロック要素が別のブロック要素内にある可能性があるため、スタイルが適用された後に機能します。

于 2009-09-21T23:58:34.327 に答える
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>
于 2009-09-21T23:41:13.580 に答える
2

別の解決策は次のとおりです。

<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>
于 2012-11-06T21:35:03.303 に答える
1


私も今日この問題を抱えて修正を探しましたが、それに対する実用的な解決策を見つけることができませんでした。だから私はこの小さな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]-->
于 2012-09-17T14:23:22.733 に答える
0

私はこれに対する解決策を見つけることができました、それは完璧ではありませんが、それは機能します：

簡略化された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>

テストページ

もう1つの方法は、以下のようにIE9のすべてのリンクでJavaScriptイベント委任を使用することです。

if( !('placeholder' in document.createElement('input')) ) // IE9 and below
    $(document).on('click.ie', 'a', function(){ // bind a delegated event
        window.location = $(this).prop('href');
    });
于 2013-02-26T17:40:23.667 に答える
0

IE 7、8、および9をサポートするのに夢中になっている場合は、これらのダミーブラウザのAタグ内にTABLEを含めることはできないことを知っておく必要があります。

これは、アンカーをブロック要素のように表示する場合にも当てはまります。ただし、アンカータグ内にdivを配置することはできますが、これは私にとってはさらに奇妙なことです。

この問題に対する他の解決策はありません。

于 2014-03-11T15:00:53.593 に答える
0

アンカータグでテーブルをラップする代わりに、href属性をテーブルに直接追加できます。

<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>

対応するURLに移動するには、テーブルをクリックして使用します 

$('#link').click(function () {
            window.location = $(this).attr('href');
            return false;
        });
于 2014-03-27T09:35:32.777 に答える
0

これを実行したい場合：

<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>

これで、テーブル内のアイテムをクリックすると機能しますが、テーブル全体は機能しません（ただし、少しは機能します）。次に、ブラウザで次のようなjQueryを使用してJSが有効になっている場合は、最終修正JavaScriptコードを適用する必要があります。

$('.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を有効にしていない場合、内部をクリックして機能します

于 2015-04-10T18:26:26.573 に答える