1

感谢您查看我的问题。

我是网络开发的新手，希望有人能澄清为什么下面的 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>

我很感激对此的任何澄清。您可以在此处查看示例。

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

http://downtownrmt.com/locations.html

4

3 回答 3

1

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

a {
display: block;
position: relative;
}

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

于 2012-08-04T01:18:57.120 回答
1

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

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

于 2012-08-04T02:34:28.237 回答
-1

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

<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 中工作；）

于 2012-08-04T01:19:54.490 回答