添加文档类型后图像恢复为常规大小

Question

当我将“!DOCTYPE html”标签添加到我的文档时，文档中的图像恢复为原始大小（忽略 css 宽度和高度属性）。

我意识到添加 doctype 会改变浏览器显示文档的模式（doctype 启用 'standards mode' 而不是 'quirks mode'）。这可能是问题的根源。但是，我不明白 'standards mode' 不喜欢我的代码的具体原因，或者如何修复它。

我写的html有什么问题'standards mode'不喜欢？

我在 Windows 的 Chrome 中看到了这种行为。

一个简化的测试用例（有doctype，图像会显得很大，没有它会显得较小）：

<!DOCTYPE html>
<html>
<body>
   <img src="http://upload.wikimedia.org/wikipedia/commons/d/de/Wikipedia_Logo_1.0.png" alt="Wikipedia Logo" style="width:250; height:250;">
   <img src="smiley.png" alt="Smiley Face" style="width:250; height:250;">
</body>
</html>

这里缺少头部部分，但我写的头部部分没有任何区别，也不是重现问题所必需的。

Answer 1

声明尺码时必须使用某种度量单位。

img{
width:250px;
}

style="width:250px"

添加文档类型后图像恢复为常规大小

Images revert to regular size when doctype is added

html

doctype

quirks-mode