我有一个带导航栏的html5页面。完全划痕编码。我刚刚在项目中添加了一个doctype，现在我的导航栏下面有额外的空间。如果我删除doctype声明，它将恢复正常。我已经完全重置了所有内容的填充，边距等，并将其缩减为少量代码来说明问题。
可以在http://hackthetruth.org/webdesign/broken
看到该页面有谁知道为什么声明doctype会弄乱div的高度？
答案 0 :(得分：44)
我的某个网站遇到了同样的问题。 我找到了这个答案here：
“使用HTML5 doctype，图像会接收文本通常会获得的行高属性，因此您可以在其下方获得”边距“。您可以将它们设置为显示：块或行-height：0，虽然我没有对后者进行足够的测试，以确保它是一个很好的解决方案。“
我将line-height:0应用于包含导航图片的<div>。它为我做了诀窍。
答案 1 :(得分：27)
使用inline-block时，这是一个有趣且微妙但重要的考虑因素。
简短的回答是：将vertical-align上的ul设置为baseline以外的任何内容。
这样做的原因是内联块被认为是文本，因此受到基于文本的属性，如line-height和vertical-align。
答案越长越好：
CSS3规范涉及到盒子模型如何工作的一些（可能是令人困惑的）深度。这是CSS3盒子规范的引用，其中我突出显示了与此问题相关的部分：
9.5。 '内联块'或浮动的，未替换的元素
...
height的使用值是计算值， 除非是'auto'，否则使用的值由''Auto'定义 流动高度的高度。“
让我们检查一下流根的自动高度是什么：
9.10。流动根的“自动”高度
在某些情况下（参见前面的章节），一个高度 element的计算方法如下：
- 如果它只有内嵌级别的子项，则高度是最顶部行框顶部与底部之间的距离 最底线的盒子。
...
感兴趣的是线盒部件。这有效地暗示了任何设置为显示为内联块的内容都受纯文本使用的隐式框布局的约束。
您现在可以猜测为什么设置vertical-align可以解决此问题，但让我们继续通过规范跟踪此问题。
line-box定义有点黯淡，section 4.2中的示例只是略有帮助。
让我们回到CSS 2.1规范，它在explaining line boxes做了一个更好的工作：
包含形成一条线的方框的矩形区域称为线框... [其高度]由线高计算部分中给出的规则确定。
从这个解释中，我们看到line-height和vertical-align属性与如何计算高度（线框，因此内联块元素）有关。阅读calculations of line-height几乎可以说清楚：
...如果[线框]对齐“顶部”或“底部”，则必须对齐它们以便最小化线框高度。
因此，我们的内联块元素的高度受其隐含线框的高度计算的影响，而这些高度计算又受这些垂直对齐计算的影响。
因此，当我们不使用基线作为内联块的垂直对齐时，框的隐式线框将缩小到它可以的最小尺寸。
混淆？ ...是啊。回到简短的回答：）
答案 2 :(得分：10)
答案 3 :(得分：2)
试试这个：
的CSS：
html * { margin:0; padding:0; }
答案 4 :(得分：1)
将XHTML4网站升级到HTML5时遇到了同样的问题。我有很多这些：
<a><img></a>
最终在图像周围添加了神奇的额外填充。对我来说解决方案很简单 - 添加这个css：
img { vertical-align: top; }
答案 5 :(得分：0)
配对该页面中有2个迷路</div>标签。在第32和34行。删除并重试。看看是否能解决问题。
答案 6 :(得分：0)
由于IE7问题，我从未使用display: inline-block，所以我不熟悉它的怪癖。似乎没有必要在你的情况下将它应用于ul#pagetab，因为它没有被内联元素包围。我只是将它转换为常规块元素。此外，由于它包含不需要浮动元素的浮动元素，我只需通过ul#pagetab给display: block; overflow: hidden;一个实际高度。
这似乎可以解决您的所有问题（我无法详细说明），并提供更具风格的风格。
答案 7 :(得分：-2)
哇。 @matt是对的（不是在这种情况下），这是一般知识，但你错了。
老兄看看你的css，你有
for .....
所以第二个声明是在#pagetab中出现的嵌套ul。你没有任何这些。
我从声明中取消了ul，所以他们是正确的元素。现在你的css有两种风格可以匹配两者（并且也在你的通用选择器中调用（fyi，它高于你的身体{}声明））所以这就是3种风格....矫枉过正。而且，那些不匹配的，你把它设置为显示：inline-block然后重置它来阻止...我迷失在这个逻辑中。
SO 举个例子。将两个页面框样式更改为此
background-color: #ff2d00;
padding: 0px 4px;
margin: 0;
}
list-style: none;
margin: 0px;
padding: 0px 4px;
display: block;
}
保存。现在脱掉它，保存为＃2。在FF3.6中它们是相同的。
如果您使用专门为解决/阻止此类问题而提供的验证器，以及qa工具（特别是在这里，我说的是尘埃选择器书签），您可以在不及时解决这个问题。
回到web标准，gen ed css：* {}是通用的，所以只要另一个声明不覆盖*的特异性，它就会一直有效。 如果你声明* {margin：0;填充：0; border：none}在页面顶部，你不必把margin：0;填充：0;在每一个元素上。你已经有了。
网络标准，他们将拯救你的生命。