doctype html中的薄图像的框模型问题？答案

【问题标题】：box model issue with thin images in doctype html?doctype html中的薄图像的框模型问题？
【发布时间】：2012-01-10 20:06:00
【问题描述】：

有没有人在 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>

这按预期工作

谁能告诉我如何让数字 1 像数字 2 一样工作

【问题讨论】：

你能更正你的代码吗？你正在关闭一个你从未打开过的 div...

标签： html doctype css

【解决方案1】：

我猜你会遇到什么。

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

发生了什么-

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

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

还有在严格模式 display:block; 或 vertical-align:bottom; 下更改图像的 css 将为您提供类似于 quirks 版本的内容

【讨论】：

【解决方案2】：

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

当然，这假设您删除了提到的杂散结束 div 标签。

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

【讨论】：