Question

我有an example mht file here这有助于证明我的问题;如果你使用FF，那么this addon将帮助你查看mht文件。您将需要下载该文件并在本地查看它，因为github没有为该文件提供正确的mime类型。

基本上我的问题是我有一个div高度为32px，围绕另一个div高度为29px，我不知道为什么前者是32px高..它应该是29px高的..我不想设置height:29px因为如果您调整窗口大小以使导航项采用两行，则div的高度不应为29px。 / p>

这里有什么问题？

Answer 1

进行以下更改 -

（ - ）使您的ul和wrapper div底部对齐更改类#navigationSecondary ul.base 拥有display:table;代替display:inline-block;

（ - ）删除底部更改类#navigationSecondary的3px蓝色，让Marcel消化padding:0;。

Answer 2

在display: inline-block;上使用ul.base是原因。

当你使用它时，它格式化一个像内联的元素（它只格式化元素的实际内容，如块），所以ul.base将具有通常的2-3px顶部和底部“填充”，一个普通的内联元素。它并不是真正的填充它是前导垂直间距，即它为线提供了足够的空间来提供像g，h，p等字母的上升和下降。

这里使用它是为了让你的ul看起来像是包含浮动的子列表元素。要使一个元素包含浮动的子元素，还有其他方法可以做到这一点，一种方法是在ul.base上

删除：display: inline-block 添加：overflow: hidden;

[已更新] 重新制作标签..抱歉我在开始之前没有看到它们

以下是包含子浮动的“浮动一切”解决方案，因为它适用于您的代码，还有一些其他建议

.menuContainer所需要的只是位置：亲属;和边界权利规则
.navigationSecondary向左漂浮，宽度为100％; （你可以删除它没有做任何事情的z-index）
.wrapper向左浮动，宽度为100％，移除高度
ul.base实际上并不需要任何东西，只需删除display-inline-block ..它不包含子列表但是没有任何影响，如果你想要你可以向左漂浮100％宽度

[更新2] 我只是将它复制到一个简单的HTML文档和我认为，只是将DOCTYPE更改为HTML4过渡版，解决了问题而没有更改代码？（为什么那应该改变显示我不太了解！ - 但是在严格的Doctypes中“不允许”使用“target = _parent”，这就是为什么它没有验证的原因）

我会把它放在JSBIN中，以便其他人可以在各种浏览器上试用它

我把它改为：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

jsbin（原始 HTML5 doctype）在这里http://jsbin.comhttp://jsbin.com/agihe5/2/ - 显示差距

jsbin 更改了Doctype - 但没有对CSS代码进行任何更改 - 使用Flash视频显示下拉列表正在运行：http://jsbin.com/inare6/2 - 没有差距！

jsbin没有更改Doctype，建议更改代码和flash插入以显示z-index工作在这里：http://jsbin.com/iriya4

使用后者，代码更改在源代码中详细说明，它们已移至快照CSS的底部

我在IE7，IE8，FF3.6.15，Safari4（Win）和Chrome

Answer 3

提供一个测试用例，要求我使用Firefox并下载扩展程序来查看它非常讨厌。

我还是这样做了（纯粹是因为赏金），你需要对你的测试用例做出的唯一改变是：

在#navigationSecondary ul.base上，添加vertical-align: top。
额外的高度消失了。

这是一个基于@ clairesuzy的标题为"jsbin (with original HTML5 doctype)"的演示的演示。 （唯一的变化是添加上述CSS规则）：

http://jsbin.com/agihe5/3

其他答案可能有用（我没有对它们进行测试），但是（假设我已正确理解了这个问题），这是迄今为止最容易解决的问题。

Answer 4

显然#navigationSecondary已在padding:0 0 3px; unnamed-1.css上设置了line 2。

Answer 5

ul.base 内的所有内容都有24px的高度。它本身有2px的填充。所以它的高度是26px。它的父 div.wrapper 的高度为29px，额外增加3px。这不是由 div＃navigationSecondary 的3px填充引起的。什么都没有贡献额外的3px所以我怀疑浮动问题。无论如何，我设法通过浮动2个div来修复它。

将float: left; width: 100%;添加到 div.wrapper 和 div＃navigationSecondary 。
从 ul.base 中删除display: inline-block;。

浮动div.wrapper和div#navigationSecondary将它们折叠到最近的浮动子元素，在本例中为li.base，并删除额外的3px。 100％宽度带回拉伸。

希望这有帮助。

Answer 6

<body style="zoom:0.99; -moz-transform: scale(0.99); -moz-transform-origin: 0 0;">

相应调整，并改变高度和宽度

Answer 7

当然。这很简单。一个非常基本的元素定位问题。

内联块默认垂直定位

ul.base是内嵌块。这意味着它的间距计算类似于块，但的位置类似于内联元素。

内联元素的默认定位是在文本基线上对齐。但是，对于g，j，q等字母，文字低于。这称为“下降”。

框的高度始终是从字体的顶部到下行部分的底部。

包装器占用其子节点的高度。这意味着内联块ul.base，位于基线上。

您特定尺寸的字体恰好有一个3像素的下行器。瞧。你神秘的3像素差距只是文本的下降。并且您的inline-block元素位于基线上（即在3个像素的顶部）。

测试以确认这是正确的

更改字体大小。你会看到3像素的变化。将字体大小改为足够小，它将减少到1px下行器。你所谓的“差距”会缩小。
将ul.base更改为inline-block以外的其他内容（当然，您必须添加一些内容以清除内部的浮动内容）。它将不再具有底部的3个像素，因为非内联元素未定位在基线上。
将ul.base置于绝对底部而非默认（基线）。那个3像素的间隙消失了。使用此CSS规则：vertical-align:bottom

故事的士气

每当使用inline-block显示样式时，您都必须小心基线定位。

非主题

使用亚洲语言处理字体下降特别令人沮丧。如您所知，CJK语言没有低于基线的字符。但是，它们通常放在基线上（这样它们就可以与其他具有下行的欧洲语言混合）。但是，当一个文本块放置一个背景，其背景只包含亚洲字符时，文本看起来会移到顶部，底部有一个丑陋的空隙（下降器）。 / p>

如何用css进行高度挤压

7 个答案:

内联块默认垂直定位

测试以确认这是正确的

故事的士气

非主题