gpt4 book ai didi

html - DOCTYPE 对 CSS 有影响吗?

转载 作者:太空宇宙 更新时间:2023-11-04 15:38:10 25 4
gpt4 key购买 nike

我想制作一个固定大小的容器,里面有一个图像(未知大小)。然后我想让图像适合容器并在其中居中(水平和垂直)。我想到的是:

<!DOCTYPE html>
<html>
<body>
<div style="width: 500px; height: 375px; display: table-cell;
vertical-align: middle">
<img src="./Slideshow_files/Charles Bridge In Prague.jpg"
style="max-width: 500px; max-height: 375px">
</div>
</body>
</html>

对于某些图像,它工作正常。然而this one (恰好大小为 500x375)使外部 div 的高度比底部的 375px 高几个像素(Chrome 中为 5px,Opera 中为 4px)。这是为什么??

编辑:刚刚添加演示 here (另一个带有 display: table-rowdisplay: table 元素,here)。在这两种情况下,红色背景都不应该可见;在 Chrome 和 Opera 中是这样。

最佳答案

您可以通过在 img 上设置 display: blockvertical-align: top(或 bottom)来解决这个问题

共有三种不同的渲染模式:

  • 怪癖模式
  • 接近标准模式
  • 标准模式

不同的文档类型触发不同的渲染模式。请参阅:http://hsivonen.iki.fi/doctype/

在标准模式下(带有触发文档类型),默认的 vertical-alignbaseline

在 Quirks 模式下(没有文档类型),默认的 vertical-alignbottom

此页面解释得很好:https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

关于html - DOCTYPE 对 CSS 有影响吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6650313/

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