1

想象三个固定大小的图像：

<!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 中查看此类页面时，您会看到我所期望的 - 三个固定大小的图像。
然而，在 Firefox 中，它不起作用。

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

我究竟做错了什么？
谢谢

4

2 回答 2

3

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

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

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

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

于 2012-07-26T19:39:40.747 回答
1

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

这是我的小提琴

或使用图像并查看...

更新：小提琴

于 2012-07-24T19:29:50.277 回答