设置DOCTYPE时,无法将宽度/高度设置为img(Firefox) [英] Unable to set width/height to an img when DOCTYPE is set (Firefox)

查看:158
本文介绍了设置DOCTYPE时,无法将宽度/高度设置为img(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

我做错了什么?

谢谢

$ b $(不显示在jsfiddle上)解决方案这似乎是Firefox的一个旧功能:我发现一个讨论从2007年开始:

因此我认为这是故意的不会消失。我想他们可能会这样想:如果你在图像上设置尺寸,一切都很好,我们会缩放它。但是,如果图像丢失,我们将渲染替代文本,并将 img 元素从替换的内联元素更改为文本,一个非替换的内联元素,对于它我们将不支持 height width ,相反,文本决定了尺寸。据推测,Firefox的作​​者认为这是正确的事情,只有在Quirks Mdoe他们做其他浏览器做。



如果添加 alt 属性(就像你应该的那样,每一个 img 都应该有一个),你会看到文本长度是如何变化的。显然,Firefox在这里把 alt 看作等效于 alt =,意味着零宽度。 b
$ b

这可以解释为什么设置显示 inline-block (或 block )会改变行为:然后应用 width height

Imagine three images with fixed size:

<!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>

When you look at such page in IE or Chrome, you'll see what I expected - threee images with fixed sizes.
In Firefox however, it doesn't work.

But if I set the images to display: block; or remove the DOCTYPE (doesn't show on jsfiddle) it works.

What am I doing wrong?
Thanks

解决方案

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 img 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.

If you add 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.

This would explain why setting display to inline-block (or block) changes the behavior: then width and height are applied.

这篇关于设置DOCTYPE时,无法将宽度/高度设置为img(Firefox)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆