设置 DOCTYPE 时无法将宽度/高度设置为 img (Firefox)答案

【问题标题】：Unable to set width/height to an img when DOCTYPE is set (Firefox)设置 DOCTYPE 时无法将宽度/高度设置为 img (Firefox)
【发布时间】：2012-07-24 19:23:07
【问题描述】：

想象三张固定大小的图片：

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
        div.photos img {
            width: 320px;
            height: 240px;
            background-color: black;
        }
    </style>
  </head>
  <body>
    <div class="photos">
        <img src="abc" />
        <img src="def" />
        <img src="ghi" />
    </div>
  </body>
</html>

当您在 IE 或 Chrome 中look at such page 时，您会看到我所期望的 - 三个固定大小的图像。
但是在 Firefox 中，它不起作用。

但是，如果我将图像设置为 display: block; 或删除 DOCTYPE（不显示在 jsfiddle 上），它会起作用。

我做错了什么？
谢谢

【问题讨论】：

在 Firefox 14 上测试您的代码，使用对真实图像的引用代替 abc、def、ghi，不会出现这样的问题。请说明“不起作用”的含义、您在测试中使用的 Firefox 版本以及您使用的确切代码（包括对可用图像的引用）。您的 jsfiddle 与包含的代码不同，并且不引用实际图像，因此它演示了在指定地址没有图像时会发生什么（已知浏览器处理方式不同）。
@JukkaK.Korpela，这正是问题所在 - 这就是为什么我将大小设置为图像，以便在无法加载时设计不会中断。 “众所周知，浏览器处理方式不同” - 好吧，我并不知道，所以我正在寻找应该被认为是正确的原因以及哪些行为是正确的。
感谢您的澄清，我虽然是关于图像本身，但它是关于当图像不可用时的渲染。

标签： html css firefox doctype

【解决方案1】：

这似乎是 Firefox 中的一个旧功能：我从 2007 年发现了一个关于它的 discussion：

所以我认为这是故意的，不会消失。我猜他们可能会这样想：如果你在图像上设置尺寸，一切都很好，我们会缩放它。但是如果图像丢失，我们将渲染替代文本，这会将 img 元素从替换的内联元素更改为 text，一个非替换的内联元素，为此我们根据规范，不支持height 和width。相反，文本决定了尺寸。并且大概 Firefox 的作者认为这是正确的做法，并且只有在 Quirks Mdoe 中他们才会像其他浏览器那样做。

如果您添加alt 属性（您应该这样做，每个img 都应该有一个），您将看到框大小如何随文本长度而变化。显然 Firefox 将此处缺少的 alt 视为等同于 alt=""，这意味着宽度为零。

这可以解释为什么将display 设置为inline-block（或block）会改变行为：然后应用width 和height。

【讨论】：

@Mr.Alien，我也不是，我已经很长时间从事网络编码工作了。取决于您如何使用图像。在我现在的情况下，在作为页面设计一部分的迷你画廊中，正确大小的空图像比缩小的边框更可取。

【解决方案2】：

我认为 firefox 不会对空的 <img> 元素应用高度和宽度，因此它必须像这样渲染，所以使用 CSS display: block;

这是我的fiddle

或者使用图片看看...

更新：fiddle

【讨论】：

谢谢，但我已经“理解”了，但为什么以及为什么删除 doctype 会改变行为？为什么只有火狐？这是正确的行为还是错误的行为？（请注意，这里的修复很明显，我正在尝试了解为什么 ff 会这样）
@Czechnology doctype 为您的 html 元素设置规则，因此当使用 doctype 时，firefox 会说 oo 它的 doctype html 所以它会相应地呈现标记..
修复不是很明显，应该是display: inline-block 让框并排显示，而不是垂直显示。
@JukkaK.Korpela 没有指定并排的人
Side-by-side 隐含在我认为的标记中：如果图像可用，它们会以这种方式显示。