表格周围的锚标记在 IE 6、7 和 IE 中不可单击8

发布于 2024-08-05 04:57:05 字数 620 浏览 3 评论 0原文

问题：当用锚标记包围表格时，表格及其中的所有内容在 IE 6、7 和 IE 中都不可单击。 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>

原文

The problem: when surrounding a table with an anchor tag, the table and everything within is not clickable in IE 6, 7 & 8. How do I solve this issue assuming I can't replace the table with divs?

Sample code:

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

旧梦荧光笔 2024-08-12 04:57:06

您可以在表格上添加 JavaScript onclick 事件处理程序来执行与链接相同的操作。

编辑：删除了最初的建议，因为它在其他浏览器中表现不佳。

回复收藏 0 原文

往事随风而去 2024-08-12 04:57:06

锚标记内不能有表格，因为表格是块标记，锚标记是内联标记。块标签不会进入内联标签内，因此代码无效。用 div 元素替换表格也不起作用，因为它们也是块元素。

该标准指定了有效代码应如何工作，但没有指定无效代码应如何工作。不同的浏览器有不同的方法来充分利用这种情况。在这种情况下，浏览器的一种替代方案是将锚点移动到表格内，另一种替代方案是将表格移出锚点。在某些情况下，这两种方法都会给出所需的结果，但在其他情况下则不然。

可靠地将块元素放入锚点内的唯一方法是使用默认为 inlinde 元素的元素，并使用 CSS 将两个元素转换为块元素：

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

代码有效，因为默认情况下两个元素都是内联元素，它在应用样式后起作用，因为块元素可以位于另一个块元素内部。

You can't have a table inside an anchor tag, as the table is a block tag and the anchor is an inline tag. Block tags don't go inside inline tags, so the code is invalid. Replacing the table with div elements doesn't work either, as they also are block elements.

The standards specifies how valid code should work, but not how invalid code should work. Different browsers have different methods of making the best of the situation. One alternative for the browser in this case is to move the anchor inside the table, another alternative is to move the table out of the anchor. Either method will give the desired result in some situations but not others.

The only way to reliably put a block element inside an anchor, is to use an element that is an inlinde element by default, and use CSS to turn both elements into block elements:

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

The code is valid as both elements are inline elements by default, and it works after the style is applied as a block element can be inside another block element.

回复收藏 0 原文

緦唸λ蓇 2024-08-12 04:57:06

为什么不这样做呢？

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

Why not do this?

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

回复收藏 0 原文

时间海 2024-08-12 04:57:06

这是一个替代解决方案：

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

Here is an alternative solution:

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

回复收藏 0 原文

述情 2024-08-12 04:57:06

我今天也遇到了这个问题并寻找解决方案，但找不到有效的解决方案。所以我想出了这个小的 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]-->

I too got this problem today and searched for a fix, but couldn't find a working solution for it. So I just came up with this small jquery solution. You can modify it as you want. Hope this will give an idea to those of you struggling with this IE7 issue.

<!--[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]-->

回复收藏 0 原文

皓月长歌 2024-08-12 04:57:06

我设法找到了一个解决方案，它并不完美，但它有效：

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

测试页面

另一种方法是在 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');
    });

I've managed to find a solution for this, it's not perfect but it works:

Simplified CSS:

a{ display:inline-block; position:relative; }
a:after{ content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:url('x'); }

Simplified 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

Another way is using JavaScript event delegation on all links on IE9 like below:

if( !('placeholder' in document.createElement('input')) ) // IE9 and below
    $(document).on('click.ie', 'a', function(){ // bind a delegated event
        window.location = $(this).prop('href');
    });

回复收藏 0 原文

段念尘 2024-08-12 04:57:06

如果您疯狂到支持 IE 7、8 和 9，您应该知道在这些虚拟浏览器中，您不能在 A 标记内包含 TABLE。

即使在将锚点显示为块元素的情况下也是如此。但是，您可以将 div 放置在锚标记内，这对我来说更奇怪。

这个问题没有其他解决方案。

回复收藏 0 原文

路还长，别太狂 2024-08-12 04:57:06

您可以将 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>

使用点击表格导航到相应的网址

$('#link').click(function () {
            window.location = $(this).attr('href');
            return false;
        });

You can add href attribute directly to table insted of wrapping table in anchor tag.

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

use on click on table for navigating to corrosponding url

$('#link').click(function () {
            window.location = $(this).attr('href');
            return false;
        });

回复收藏 0 原文

川水往事 2024-08-12 04:57:06

如果你想这样做：

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

现在，当你单击表格内的项目而不是整个表格时，它可以工作（但有一点工作！）。然后，您必须应用最终修复 JavaScript 代码，以防浏览器使用 jQuery 启用 JS，如下所示

$('.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，则可以单击内部

If you want to do this:

<a href="domain.com/page.htm">
<table><tr><td>Hello World!</td><td><img src="image.jpg"></td></tr></table>
</a>

First, you have to make an universal code that's work in all browsers without JavaScript like:

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

Now it works when you click items inside the table but no the entire table(but a little works!). Then, you have to apply a final fix JavaScript code in case browser has enable JS using jQuery like this:

$('.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

And now it entirely works, in case browser doesn't have enable JS, works clicking inside

回复收藏 0 原文

~没有更多了~