Question

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

<!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上显示），则可以正常工作。

我做错了什么？感谢

Answer 1

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

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

如果您添加alt属性（正如您所希望的那样，每个img都应该有一个属性），您将看到框大小如何因文本长度而异。显然，Firefox会将丢失的alt视为等同于alt=""，意味着零宽度。

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

Answer 2

我认为firefox不会将高度和宽度应用于<img>元素，这些元素是空的，因此它必须像那样呈现，所以使用CSS display: block;

这是我的fiddle

或使用图片查看...

更新： fiddle

设置DOCTYPE时无法将宽度/高度设置为img（Firefox）

2 个答案: