Hyperlink area not clickable in Internet Explorer_问答_开发者

Hyperlink area not clickable in Internet Explorer

开发者 https://www.devze.com 2023-04-10 01:43 出处：网络

In the following example, the word Test is not clickable in Internet Explorer, even though the link URL appears at the bottom of the page when it\'s hovered over, and the link\'s area is represented a

In the following example, the word Test is not clickable in Internet Explorer, even though the link URL appears at the bottom of the page when it's hovered over, and the link's area is represented accurately in the horrible IE debugging tool (F12). This works fine in all other browsers (of course).

<a href="/"><table><tr><td>Test</td></tr></table></a>

I know it's not technically开发者_Python百科 valid to nest a table inside a hyperlink tag, but it's really the only practical way to do what I want to accomplish, and seeing how it works fine in all browsers, is there a way to get it to work in IE?

So far, I've tried giving both the table and link a height, width, and also a display property of inline-block. None have worked. Thanks.

You say "seeing how it works fine in all browsers" -- but that's really not true. What's actually happening in some browsers is they're doing work to make it work.

Do something like this instead:

<table onclick="location.href='/'" style="cursor: hand;">
<tr><td>Test</td></tr>
</table>

Also a hack, but a more valid one.

UPDATE

If you have concens about crawlers, there are two possible approaches. One is to add a link after, something like:

<table onclick="location.href='/'" style="cursor: hand;">
<tr><td>Test</td></tr>
</table>
<a href="/" style="display:none;">Test</a>

You can also use a <link> tag in the <head> of the document, something like:

<link href="/" rel="section" />

Or whatever link rel type makes sense.

Additionally, HTML structured as you have in your question is invalid according to the spec. In terms of what works reliably and into the future, your code does not qualify. Code written more towards an eye on standards will work more reliably.

ANOTHER UPDATE

Given your comment, here's how I would structure this, assuming markup like this:

<table class="dataTable">
    <tr>
       <td><img></td>
       <td>Description</td>
       <td><a href="/" class="details">Details</a></td>
    </tr>
</table>

Your details link represents the link you're using, so what I would do is add this bit of JavaScript (uses jQuery, but could be rewritten for whatever libraries you're currently using:

<script>
jQuery(function($){
  $('table.dataTable').delegate('td', 'click', function(){
    $(this).find('a.details').trigger('click');
  });
});
</script>