Question

有没有人在html盒子模型中有任何瘦图像的经验？

即这段代码杀了我：

<!DOCTYPE html>
<html>
<head>
</head>

<body>
<img src="myimage1.jpg" border="1" /></div>
<img src="myimage2.jpg.jpg" border="1" />
</body>
</html>
where both images are like 6px height and 960px wide

在标准盒子模型中，即：

<html>
<head>
</head>

<body>
<img src="myimage1.jpg" border="1" /></div>
<img src="myimage2.jpg.jpg" border="1" />
</body>
</html>

这可以按预期工作

有人可以告诉我如何使第一号像二号一样工作

Answer 1

我猜你正在遇到什么。

<img src="myimage1.jpg" border="1" /></div>

发生了什么 -

现代浏览器/解析器，尤其是像Chrome这样挑剔的浏览器/解析器会尝试修复您的代码而不是忽略/ div以使其具有语义性。如果您使用的是开发人员工具，请右键单击以检查元素，您可能会注意到浏览器添加了<div></div>

这是由html5 <!DOCTPE html>定义的，它将确保浏览器强制它进入更严格的模式而不是怪癖模式

另外在严格模式display:block;或vertical-align:bottom;中更改图像的CSS将为您提供类似于怪癖版本的内容

Answer 2

你的第二个例子，你所称的“标准模型”是不正确的。这是“怪癖模式”，没有现代网页。所有新网页都需要一个doctype，例如您显示的文档类型，以强制执行标准模式。这是你的第一个例子，你遇到问题的那个，就是向你展示正确的盒子模型，你应该遵循它。

当然，这假设你删除了上面提到的迷失结尾div标签。

但是你显然没有向我们展示所有的标记，而且在这里发生了更多的事情，如果没有看到它我们就无法帮助。

doctype html中的瘦图像的盒子模型问题？

2 个答案: