当我将文档类型添加到我的网页时，图像不会加载答案

【问题标题】：Images don't load when I add a doctype to my webpage当我将文档类型添加到我的网页时，图像不会加载
【发布时间】：2012-06-21 00:32:54
【问题描述】：

我需要在我的 html 网页中添加一个doctype，因为如果我这样做，IE 只会正确格式化它。但是当我添加它时，页面上的一些图像没有加载。图像嵌入了 CSS 背景属性，并以divs 显示在屏幕上。它不会在所有常见的浏览器中加载图像。

可能是什么问题？我真的需要doctype up。

CSS：

.blue {
    position: absolute;
    background: url(blue.png) no-repeat center center;
    top: 163;
    width: 228;
    height: 434;
}

.green {
    position: absolute;
    background: url(green.png) no-repeat center center;
    top: 120;
    width: 266;
    height: 209;
}

.orange {
    position: absolute;
    background: url(orange.png) no-repeat center center;
    top: 183;
    width: 165;
    height: 291;
}

HTML：

<div class="blue"> </div>
<div class="green"> </div>
<div class="orange"> </div>

顶部的文档类型：

<!DOCTYPE html>

【问题讨论】：

您很可能正在使用一些非标准的 CSS。请张贴小的 HTML 片段和 CSS 片段。还可以考虑在您正在使用的浏览器的开发工具 (F12) 中检查控制台输出和样式，以便为问题添加更多详细信息。
@Derek 添加了代码。抱歉，我认为这可能是一个明显的问题，我想它确实需要代码，因为无效的 CSS 建议
@AlexeiLevenkov 我添加了代码。控制台不输出任何与图像或 CSS 相关的内容。
如果您在 Chrome 中右键单击并检查您的页面，您可以查看到底应用了哪些 CSS 属性。

标签： html css image doctype

【解决方案1】：

我认为这与您的 CSS 宽度和高度声明的末尾没有“px”有关。

您能否检查<div> 元素是否以宽度和高度呈现以显示背景图像？

【讨论】：

宾果游戏。我很粗心，没有注意到。我以前从来没有经常使用过文档类型，但谢谢你。现在我知道我不应该做草率的编码。

【解决方案2】：

问题在于 HTML5，它和 HTML4 一样严格要求值有单位，否则它们会被忽略。您需要将px 添加到所有位置高度和宽度数字的末尾。 Alexei 指出您的 url 也需要在它们周围加上引号也是正确的。

【讨论】：

【解决方案3】：

不是必需的，但很高兴拥有：您缺少 Url 周围的引号：http://www.w3.org/TR/CSS2/colors.html#propdef-background-image

background: url("orange.png") no-repeat center center;

【讨论】：

即使在“url”周围添加引号后，我仍然没有运气。
我的网站徽标有一个类似的 div，它加载正常。我遇到了一个很奇怪的错误。
我认为这与绝对定位有关？这是我展示给你的 3 个 div 和徽标 CSS 之间的唯一区别
这个答案不正确 - URI 的引号不是必需的，省略它们不会导致图像在 大多数 情况下无法加载（如示例在问题中）：w3.org/TR/CSS2/syndata.html#value-def-uri
-1 退出！虽然如果可以的话，这句话最好写成：“不是必需，但很高兴拥有：”。我让您自行决定:)