Internet Explorer 7 的“背景图像”属性是否存在 CSS 解析问题？答案

【问题标题】：Does Internet Explorer 7 have a CSS parsing issue with the "background-image" property?Internet Explorer 7 的“背景图像”属性是否存在 CSS 解析问题？
【发布时间】：2010-04-08 15:10:32
【问题描述】：

在 Internet Explorer 7 中出现 CSS 布局问题（大吃一惊）。在使用开发人员工具检查 CSS 时，我发现样式表中定义的一些属性没有出现在解析的 CSS 结构中......然后我看到 THIS 显示为 background-image 的解析值强> 属性：

background-image : url(/trunk/httpdocs/images/layout/HCBL_Homepage_01.jpg); WIDTH: 1200px;

几乎消除了定义的 width 属性。

该元素的 CSS 文件中的实际代码：

div#header {
        width: 1200px;
        height: 100px;
        margin-left: auto;
        margin-right: auto;
        background-image: url('/trunk/httpdocs/images/layout/HCBL_Homepage_01.jpg');
        background-repeat: no-repeat;
}

如果有人能提供任何见解，或提供描述此问题的链接（也许是一种解决方法...），我将不胜感激。

另外，我只对样式表和 CSS 语法的解析感兴趣。我目前不关心渲染和显示问题；我只是想让 IE 7（我感觉 IE 6 也会有类似的问题）来识别和解析样式表中定义的所有 CSS 属性。

另外，这里有一个 link to some static HTML and CSS 这说明了所描述的问题。

提前谢谢各位！

【问题讨论】：

顺便说一句，说到文档类型，IE 6 和 IE 7 可以处理 XHTML 1.1 文档类型（的基本元素）吗？或者在应该选择不同的文档类型这一点上，它们是否被严重破坏了？比如 XHTML 1.0 Transitional 还是 XHTML 1.0 Strict？

标签： css internet-explorer xhtml internet-explorer-7 cross-browser

【解决方案1】：

你确定你的 url 周围有常规的引号，而不是花哨的卷曲吗？如果将它们更改为引号，您会得到相同的行为吗？

【讨论】：

它们是常规的单引号，而不是反引号或双引号。带引号和不带引号都会出现相同的行为。
你是否处于怪癖模式？
你甚至不需要引号，这就是括号的用途。
是的，我知道引号是可选的。但是不管有没有引号，都会发生同样的事情。
您可能已经“设置”了标准模式，但其他东西可能会触发怪癖模式。您使用的是什么文档类型。我们可以看到实际的实时页面吗？

【解决方案2】：

我不是 100% 了解您的文件夹结构或访问图像的方式，但您是否尝试过不使用第一个斜杠或在第一个斜杠前添加 ..？

您网站根目录中的 CSS 和 JPG 文件位于何处？

【讨论】：

它可以很好地找到并显示图像。事实上，背景图像属性似乎在解析过程中消耗了其他属性作为它的一部分。因此，由此产生的问题实际上是，尽管在样式表中进行了定义，但并非所有 CSS 属性都应用于元素，从而导致现在的布局问题。