gpt4 book ai didi

css - HTML5 Doctype 搞砸了 DIV 高度?

转载 作者:太空狗 更新时间:2023-10-29 15:33:25 25 4
gpt4 key购买 nike

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

<!DOCTYPE html>

并将图像放入 div 中,div 始终呈现 4 个像素的高度。如果我使用旧的文档类型

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

div 正确呈现,与其中的图像高度相同。这是使用完全相同的 HTML 和 CSS 代码。唯一改变的是文档类型和额外的 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"> = 几乎标准模式 - http://jsbin.com/ogacor/2

要修复它,请添加 display: blockvertical-align: top (或 bottom )到 img .

首先发生这种情况的原因是 img默认情况下为 inline元素,并有一个默认值 vertical-alignbaseline .基线不接触包含元素的底部 - 间隙是两者之间的距离。

参见:

关于css - HTML5 Doctype 搞砸了 DIV 高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6699933/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com