Question

以下在Chrome和Firefox中运行良好，并使容器可以点击。在Internet Explorer中，它也可以单击，但只更改光标以指示内部div，但不是span。

我可以使用cursor:pointer解决此问题，但更重要的是，它不允许在新标签页中右键单击。

这个问题有解决方法吗？谢谢！

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

Answer 1

您的HTML无效，虽然浏览器按预期执行，但这绝不会验证。

对于可点击的div，您可以使用jQuery来执行您想要的操作：

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

Example for you here。

Answer 2

IE（至少6个，我不确定新版本）不支持inline-block最初内联的元素，例如span。请尝试使用块元素。

顺便说一下，除非您正在创建HTML5，否则a元素内不允许使用块元素。这可能会导致不支持它的浏览器出现问题。

Answer 3

在内联级元素中包含块级元素是无效的。

但是，至少在IE8中，您可以通过为页面提供doctype来解决您的问题。我使用过html5 doctype，但也许它也适用于其他人：

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

顺便说一句，在html5中，像你一样使用a标签是有效的。

Answer 4

以下是我为标题实现可点击横幅的方法。如果背景图像大于h1链接，则以下段落将显示覆盖横幅。我认为这是你想要完成的事情。

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

这将验证为html5并为您提供更多灵活性。你可以有一个标题横幅，它仍然链接并在标题区域中包含任意数量的其他元素 - 甚至是其他链接。

链接内联块跨度和Internet Explorer

4 个答案: