h2 中的 Img 未在 Internet Explorer 中排队

【问题标题】：Img in h2 not lining up in Internet Explorerh2 中的 Img 未在 Internet Explorer 中排队
【发布时间】：2010-09-30 06:41:50
【问题描述】：

我目前正在设计我的个人网站，并希望在同一行中的 h2 标题中包含图像。我当前使用的标记会验证，css 也会验证，并且所需的效果会在标准模式下显示在 Firefox、Chrome、Safari 和 IE8 上。

IE8 在兼容模式下，而 IE6+7 则将图像放到下一行，这当然看起来很糟糕。我不太确定如何解决这个问题，目前我被卡住了。非常感谢帮助和解释，可能是一个指针，让我可以用 IE 来更多地了解那些特定的东西。

【问题讨论】：

【解决方案1】：

不要将<img> 标记用于您要执行的操作。尽管它们是图像，但它们并不是<img> 标签的用途。该标记旨在显示页面上 content 的图像。在您的情况下，图像是页面的风格元素，因此属于 CSS，即作为背景图像。

将图像放置在 CSS 中，作为背景图像，也应该可以减轻您对 IE 的担忧：

h2#weblog { background: url(images/weblog.png) right no-repeat }

就让您了解 IE 头痛的资源而言，我发现 QuirksMode 很好地概述了 IE 中涉及的问题，以及对如何解决这些问题的一些见解。

【讨论】：