设置DOCTYPE时,无法将宽度/高度设置为img(Firefox) [英] Unable to set width/height to an img when DOCTYPE is set (Firefox)
问题描述
<!DOCTYPE html>
< html>
< head>
< style type =text / css>
div.photos img {
width:320px;
height:240px;
背景色:黑色;
}
< / style>
< / head>
< body>
< div class =photos>
< img src =abc/>
< img src =def/>
< img src =ghi/>
< / div>
< / body>
< / html>
当您看这样的页面在IE或Chrome中,你会看到我的预期 - 固定大小的三维图像。
然而,在Firefox中,它不起作用。 >
但是,如果我将图像设置为 我做错了什么? display:block;
或者移除 DOCTYPE $ c
谢谢
因此我认为这是故意的不会消失。我想他们可能会这样想:如果你在图像上设置尺寸,一切都很好,我们会缩放它。但是,如果图像丢失,我们将渲染替代文本,并将 img
元素从替换的内联元素更改为文本,一个非替换的内联元素,对于它我们将不支持 height
和 width
,相反,文本决定了尺寸。据推测,Firefox的作者认为这是正确的事情,只有在Quirks Mdoe他们做其他浏览器做。
如果添加 这可以解释为什么设置 Imagine three images with fixed size: When you look at such page in IE or Chrome, you'll see what I expected - threee images with fixed sizes. But if I set the images to What am I doing wrong? This seems to be an old feature in Firefox: I found a discussion about it from year 2007: So I suppose it’s intentional and won’t go away. I guess they might be thinking this way: Everything is fine if you set dimensions on an image, we’ll scale it. But if the image is missing, we will render the alternative text instead, and this changes the If you add This would explain why setting 这篇关于设置DOCTYPE时,无法将宽度/高度设置为img(Firefox)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋! alt
属性(就像你应该的那样,每一个 img
都应该有一个),你会看到文本长度是如何变化的。显然,Firefox在这里把 alt =
,意味着零宽度。 b
$ b 显示
到 inline-block
(或 block
)会改变行为:然后应用 height
。 <!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>
In Firefox however, it doesn't work.display: block;
or remove the DOCTYPE
(doesn't show on jsfiddle) it works.
Thanksimg
element from a replaced inline element to a text, a non-replaced inline element, and for it we won’t support height
and width
, by the spec. Instead, the text determines the dimensions. And presumably the authors of Firefox think this is the right thing to do, and only in Quirks Mdoe do they do as other browsers do.alt
attributes (as you should, every img
should have one), you’ll see how the box size varies by text length. Apparently Firefox treats a missing alt
here as equivalent to alt=""
, implying zero width.display
to inline-block
(or block
) changes the behavior: then width
and height
are applied.