css–HTML5 Doctype搞砸DIV高度？_html-js-css

概述如果我使用HTML5文档类型,则在Mac上的Chrome,Safari或Firefox中呈现页面时<!DOCTYPE html> 并将图像放在div中,div一直呈现4像素太高.如果我使用较旧的doctype<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'htt

如果我使用HTML5文档类型,则在Mac上的Chrome,Safari或firefox中呈现页面时

并将图像放在div中,div一直呈现4像素太高.如果我使用较旧的DOCTYPE

正确渲染div,其高度与其中的图像相同.这是使用完全相同的HTML和CSS代码.唯一改变的是DOCTYPE和额外的4个像素.有没有什么办法解决这一问题？最佳答案http://hsivonen.iki.fi/doctype/

<！DOCTYPE html> =标准模式 – http://jsbin.com/ogacor

<！DOCTYPE HTML PUBliC“ - // W3C // DTD xhtml 1.0 Transitional // EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional.dtd\"\u0026gt; =几乎标准模式 - http://jsbin.com/ogacor/2

要修复它,将display：block或vertical-align：top(或bottom)添加到img.

首先发生这种情况的原因是imgs默认是内联元素,并且具有默认的垂直对齐基线.基线不会触及包含元素的底部 – 间隙是两者之间的距离.

看到：

> https://developer.mozilla.org/en/Gecko%27s_Almost_Standards_Mode > https://developer.mozilla.org/en/Images%2c_Tables%2c_and_Mysterious_Gaps 总结

以上是内存溢出为你收集整理的css – HTML5 Doctype搞砸DIV高度？全部内容，希望文章能够帮你解决css – HTML5 Doctype搞砸DIV高度？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/web/1125687.html