Link around inline-block span and Internet Explorer_问答_开发者

Link around inline-block span and Internet Explorer

开发者 https://www.devze.com 2023-02-06 10:16 出处：网络

The following works fine in Chrome and Firefox, and makes the container clickable. In Internet Explorer it is clickable too, but does only change the cursor to indicate so for the inner div, but not e

I can fix this with开发者_开发百科 cursor:pointer, but more importantly it does not allow for right click to open in a new tab.

Is there a solution to this problem? Thanks!

<html>
  <head>
    <style type="text/css">
       span{display:inline-block;width:100px}
    </style>
  </head>
  <body>
    <a href="/">
      <div>
        <div>title</div>
        <span>text</span><span>text</span>
      </div>
    </a>
  </body>
</html>

Your HTML is invalid, although the browsers do as you expect, this will never validate.

As for the clickable div, you can use jQuery to do what you want:

$(function (){
    $("#clickme").click(function(event) {
        event.preventDefault();
        window.open('http://www.whatever.com');
    });
});

Example for you here.

IE (6 at least, I'm not sure about newer versions) doesn't support inline-block on elements that are originally inline such as span. Try using block elements there instead.

BTW, unless you are creating HTML5, block elements are not allowed inside aelements. This could lead to problems on browsers that don't support it yet.

It is not valid to have a block-level element inside an inline-level element.

However, at least in IE8 you can solve your problem by giving the page a doctype. I have used the html5 doctype, but perhaps it works with others as well:

<!doctype html>
<html>
  <head>
    <style type="text/css">
       span{display:inline-block;width:100px}
    </style>
  </head>
  <body>
    <a href="/">
      <div>
        <div>title</div>
        <span>text</span><span>text</span>
      </div>
    </a>
  </body>
</html>

By the way, in html5 it is valid to use the a tag like you do.

Here's how I implement a clickable banner for a header. If the background image is larger than the h1 link, the following paragraphs will show up overlaying the banner. I think this is what you're trying to accomplish.

<!DOCTYPE html>
<html>
  <head>
    <title>Banner Example</title>
    <style type="text/css">
      #header {
        background-image: url('header_banner.jpg');
      }

      h1 a {
        display: block;
        height: 120px;
        width: 500px;
        text-indent: -9999; /* to hide the text that would show */
                            /* over the banner */
      }
    </style>
  </head>
  <body>
    <div id='header'>
      <h1><a href="/">This is a header link.</a></h1>
      <p>Here is some text.</p><p>Here is some more text.</p>
    </div>
  </body>
</html>

This validates as html5 and gives you a lot more flexibility. You can have a header banner that still links and have any number of other elements in the header region - even other links.