Doctype html问题
我正在制作一个使用WYSIWYG编辑器的页面。像大多数编辑器一样，它将所有内容都放在"“标签中。
当图像具有100%的高度和宽度时，这会产生格式问题。
下面的html显示了这个问题：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>No doc type</title>
<style type="text/css">
/* css reset */
* {
vertical-align: baseline;
font-family: inherit;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}
html{
font-size:100%;
height: 100%;
}
body{
height: 100%;
font-size:62.5%; /* Reduce to 10px base */
font-family:Arial, Helvetica, sans-serif;
}
</style>
</head>
<body style="margin:0;">
<div>
<div style="width: 500px; height: 200px;">
<div>
<div style="border:1px solid #000; padding: 0; width: 498px; height: 198px;">
<p>
<img style="height: 100%; width: 100%;" src="http://www.google.com/logos/newyears10.gif"/>
</p>
</div>
</div>
</div>
</div>
</body>
</html>在firefox中，p标记实际上溢出了div。这使得100%高度的图像超过了div的100%。
如果我删除doctype，问题就解决了。我不太理解文档类型，但我认为我使用的是一个很好的文档(我用谷歌搜索了一下)。我认为不使用它是不好的。
有谁知道如何使用doctype正确地显示它？
谢谢
回答 3
Stack Overflow用户
发布于 2010-01-01 15:39:50
我不确定您可能还会对页面做什么，但调整段落高度将更正输出。
div p{ height: 100%; }Stack Overflow用户
发布于 2010-01-01 16:39:35
正如Zurahn所写的，设置p的高度将解决问题。
为了理解这一点(并得出可能更适合您的其他变体)：1.图像本身就是311x137 2.因为p没有高度，所以图像可以计算出边界元素( p)的宽度，但不能计算出高度。3.图像因此变得与宽度一样大，并缩放图像-创建了219px 4的高度。然后p反过来拉伸以适合图像。5.给p一个高度，让图像知道它应该得到的高度是100%。然后，它可以相应地缩放图像。哇，写得不是很好：
但是现在Q是-为什么它不从祖先那里获得高度-，就像它从祖先那里获得宽度一样？
而这个问题的答案必须与浏览器破坏高度的方式有关，这反过来又与浏览器在允许溢出到宽度之前对溢出到高度的内容的容限有关。
Stack Overflow用户
发布于 2011-07-10 17:25:04
我想我和你有同样的问题。文档类型html在页面底部添加一个空格。这里有几个解决方案。您可以将其中一个属性添加到图像中。
style="display:block"- add属性类似于
align="absmiddle" - add，浮动类似于
style="float:left"
https://stackoverflow.com/questions/1988109
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号