Question

感谢您查看我的问题。

我是网络开发的新手，希望有人可以澄清为什么下面的HTML在IE中无法正常显示，但适用于Chrome，Firefox和Safari。目标是创建带有图像和标题的可点击divs。

在IE中，后台h2中的div是可点击的。我已将<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 {
display: block;
position: relative;
}

这告诉IE将整个a作为一个盒子级别，而不是仅仅将一个链接应用于它内部的项目。

Answer 2

您将内容类型声明为应用程序：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，但（如评论中所讨论的）是有效的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中工作;）

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

3 个答案: