gpt4 book ai didi

css - 影响图像间距的严格 DOCTYPE

转载 作者:技术小花猫 更新时间:2023-10-29 11:44:56 24 4
gpt4 key购买 nike

当我切换到 XHTML Strict DOCTYPE 时,我的图像间距出现问题。

以下代码 - 使用 Yahoo 的重置样式表来消除所有默认的浏览器填充 - 在下面的两个图像之间留下大约 4 像素的间隙,但仅当我使用严格的文档类型时。这是为什么?

这只是 Chrome 和 Firefox 中的一个问题。 IE 不显示两个图像之间的单个像素。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css">
</head>

<body>

<div><img src="http://www.catfacts.org/cat-facts.jpg" border="0"/></div>
<div><img src="http://www.catfacts.org/cat-facts.jpg" border="0"/></div>


</body>
</html>

最佳答案

以 Peter 的回答作为开始,以下解决了问题:

img { vertical-align: bottom }

之所以可行,是因为 vertical-align 的默认值是 baseline,它相当于悬空位悬卡在“在线上方”的文本部分向下(小写的 g、q 等都低于该基线)。

因此,为了留出空间,它为这些悬垂物留出了 4px 的空间。

希望这是有道理的。

编辑:来自 source site 的视觉辅助
alt text
(来源:brightlemon.com)

关于css - 影响图像间距的严格 DOCTYPE,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/489974/

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