在使用时,这是一个有趣、微妙但重要的考虑因素。 inline-block .

简短的回答是:设置 vertical-align 对你 ul 除了 baseline .

这样做的原因是,内联块被视为文本,因此受到基于文本的属性(如行高和垂直对齐)的影响。

较长的答案如下:

CSS3规范深入探讨了盒模型的工作方式(可能令人困惑)。下面是CSS3 Box规范的引用,其中我突出显示了与此问题相关的部分:

9.5。_152;inline block_,或浮动、未替换的元素

…使用价值 height 是计算值, 除非是__auto_,当使用的值由___auto_定义时, 流动根高度。

让我们检查一下流根的自动高度是多少:

9.10。_

在某些情况下(见前面的章节),高度 元素计算如下:

• 如果它只有行内级别的子级,则高度是最上面的行框顶部和 最下面的线框。

…

线盒零件是感兴趣的。这实际上意味着任何设置为显示为内联块的内容都受制于纯文本使用的隐式方框布局。

你现在可以猜出为什么设置 垂直对齐 修复了这个问题,但让我们继续通过规范跟踪这个问题。

这个 line-box 定义有点平淡无奇,例如 section 4.2 只是有点帮助。

让我们回到CSS 2.1规范,它在 explaining line boxes :

包含构成线条的方框的矩形区域称为线条框…[其高度]由在线高度计算一节中给出的规则确定。

从这个解释中,我们看到 line-height 和 垂直对齐 属性与如何计算高度(线框的高度,因此是内联块元素)有关。阅读 calculations of line-height 几乎要说清楚:

…如果[行框]与“上”或“下”对齐,则必须对齐,以使行框高度最小化。

因此,我们的内联块元素的高度受其隐式线框高度计算的影响,这些计算反过来又受到这些垂直对齐计算的影响。

因此,当我们不使用基线作为内联块的垂直对齐时,该框的隐式行框将缩小到它可以缩小的最小大小。

迷惑?是的。回到简短的答案:)

我的一个网站也有同样的问题。 我找到了这个答案 here :

“对于HTML5 doctype,图像接收的似乎是文本通常获得的行高属性,因此在图像下方会得到一个页边距。您可以将它们设置为display:block或line height:0,尽管我没有对后者进行足够的测试,以确保它是一个很好的修复。”

我申请了 line-height:0 到 <div> 其中包含导航图像。这对我有好处。

这是因为doctype将呈现模式更改为标准遵从模式。具体来说,这意味着您现在使用的是W3C Box模型,它计算块元素的宽度/高度与quirks模式不同。

多读 here , here 和 here .

试试这个:

CSS:

html * { margin:0; padding:0; }

我在将XHTML 4网站升级到HTML5时遇到了同样的问题。我有很多这样的东西:

<a><img></a>

最后在图像周围加上了神奇的填充物。对于我来说,解决方案很简单——添加这个CSS:

img { vertical-align: top; }

伙计,你有两个流浪汉 </div> 那个页面上的标签。在第32和34行。删除并重试。看看能不能修好。

我从未使用过 display: inline-block 由于IE7的问题,所以我不熟悉它的怪癖。似乎没有必要把它应用到 ul#pagetab 在您的情况下,因为它没有被内联元素包围。我只需要把它转换成一个普通的块元素。此外,因为它包含了不需要在一些内联元素旁边浮动的浮动元素,所以我只给出 ULαPGATETAB 一个真正的高度通过 display: block; overflow: hidden; .

这似乎解决了你所有的问题(我无法详细解释),并提供了更合适的风格。

真的。@马特是对的(不是在这种情况下),这是常识,但你们都错了。

伙计,看看你的CSS,你有

pagetab背景色:ff2d00;填充:0px 4px;页边距:0;显示:内联块;

pagetab ul列表样式:无;页边距:0px;填充:0px 4px;显示:block;

因为…

因此第二个声明位于pagetab中出现的嵌套ul上。你没有这些。

我把保险商实验室从声明中去掉了,所以它们是正确的元素。现在你的CSS有两种风格可以同时匹配(在你的通用选择器中也被称为(fyi,它位于你身体的上方声明)),所以这是3种风格……过度杀戮。此外,那些不匹配的,您将其设置为显示:内联块,然后将其重置为块…我在这个逻辑中迷失了。

所以 举个例子。将两页选项卡样式更改为

PaGETAB {

background-color: #ff2d00;
padding: 0px 4px;
margin: 0;

}

PaGETAB {

list-style: none;
margin: 0px;
padding: 0px 4px;
display: block;

}

保存它。现在把它脱掉,另存为2。在7的ff3.6中,它们是相同的。

如果您将使用专门为解决/预防此类问题而提供的验证器,以及QA工具(特别是这里,我讲的是dust me selectors bookmarklet),那么您将在不时间内解决此问题。

回到Web标准,gen ed css:*是通用的,只要另一个声明不覆盖*的特殊性,它就会一直工作。 在英语中,如果在页面顶部声明*Margin:0;padding:0;border:none,则不必在每个元素上都添加Margin:0;padding:0。你已经有了。

网络标准,他们会拯救你的生命。