为什么这个链接在 IE 中不起作用？

Question

感谢您查看我的问题。

我是 Web 开发的新手，希望有人能澄清为什么下面的 HTML 在 IE 中无法正确显示，但在 Chrome、Firefox 和 Safari 中有效。目标是创建带有图像和标题的可点击divs。

在 IE 中，背景和div 中的h2 是可点击的。我已将<img> 包装在<a> 标记中，这似乎可以正常工作，但感觉就像是黑客攻击。

HTML：

<a href="locations.html">
  <div class="boxSmall">
  <h2>Location</h2>
    <div class ="boxImage">
      <img src="images/ex.jpg" alt="Registered Massage Therapist" height="175px" width="195px"/>
    </div>  
  </div>
</a>

我希望对此作出任何澄清。可以查看示例here.

我环顾四周，发现块项目应该能够包含在 HTML 5 中的链接中。IE 知道吗？我想编写符合标准的代码，但我真的很想编写有效的代码。

http://downtownrmt.com/locations.html

Answer 1

通常将以下内容添加到您的 a 标签中即可：

a {
display: block;
position: relative;
}

这告诉 IE 将整个 a 视为一个框级别，而不是仅将 a 链接应用于其中的项目。

Answer 2

您将您的内容类型声明为 application:xhtml/xml ，但这是针对 XML 的，您没有将其作为 XML 提供。删除该行。此外，Google 会忽略您的关键字元标记。永远记住，IE 是迄今为止地球上最糟糕的浏览器。

验证您的 html 是否存在其余错误。

Answer 3

我在您的示例中看到以下内容，而不是发布的代码：

<a href="services.html">
    <div class="boxSmall">
        <h2>Services</h2>
        <div class="boxImage">
            <a href="services.html"><img src="images/ex.jpg" alt="Registered Massage Therapist" height="175px" width="195px"/></a>
        </div>
    </div>
</a>

正如您已经写过的，这不是符合 HTMl4 的标准，但（如 cmets 中所讨论的）是有效的 HTML5。即使至少 Firefox 从中创建了非常疯狂的代码。因此，只需使用 FireBug 或检查器查看 DOM。

所以让我们使用：

<a href="services.html">
    <span class="boxSmall">
        <span class="h2">Services</span>
        <span class="boxImage">
            <img src="images/ex.jpg" alt="Registered Massage Therapist" height="175px" width="195px"/>
        </span>
    </span>
</a>

您可以使用 CSS 的 display 属性再次获取块：

boxImage, boxSmall, h2 {
    display: block;
}

虽然您可能需要设置更多样式，因为我需要删除 h2...

PS：这最终应该可以在 IE 中工作；）