深层次display:inline

2021-03-12 09:53 jianzhan

在应用 CSS 完成主要表现的情况下,会常常触碰到 display:inline-block 这1特性,不管是初触碰 Web 规范還是触碰规范已久的盆友,大多数会对这1特性觉得很蒙蔽和模糊不清。
display:inline-block

将目标呈递为内联目标,可是目标的內容做为块目标呈递。周围的内联目标会被呈递在同1行内,容许空格。

但针对这个特性并不是全部访问器都鉴别。

适用的访问器有:Opera、Safari。

但很遗憾,最时兴的 IE 和 Firefox 却不适用这个特性(在 Firefox3 版本号中可能适用 display:inline-block)。但是 Firefox 下却有独享特性 -moz-inline-box 和inline-block 形似,为何是“形似”而并不是“神似”呢?这是由于应用 -moz-inline-box 会带来许多出乎意料的并发症,例如应用这1特性后,text-align 有时就会有难题,还得改用 Firefox 的独享特性 -moz-box-align 来处理(感谢 aoao 出示实例)。

提议:最好是不必应用 Firefox 独享特性 -moz-inline-box。

也许有盆友会对上面所说的 IE 也不适用 display:inline-block 特性,表明疑惑或抵制。说:“我在 IE 中对 a 或 span 等内联元素应用 display:inline-block 1直是合理的”。

实际上要不然,在IE中对内联元素应用 display:inline-block,IE 是不鉴别的,但应用 display:inline-block 在 IE 下会开启 layout(假如你对 layout 觉得到生疏,能够参看 old9 汉语翻译的《On having layout》),从而使内联元素有着了display:inline-block 特性的表症。从上面的这个剖析,也不难了解为何 IE 下,对块元素设定 display:inline-block 特性没法完成 inline-block 的实际效果。这时候块元素仅仅是被 display:inline-block 开启了 layout,而它本便是行合理布局,因此开启后,块元素仍然還是行合理布局,而不容易如 Opera 中块元素呈递为内联目标。

拓宽1个难题:IE下块元素怎样完成 display:inline-block 的实际效果?

有两种方式:

1、先应用 display:inline-block 特性开启块元素,随后再界定 display:inline,让块元素呈递为内联目标(两个display 要前后放在两个 CSS 申明中才合理果,这是 IE 的1个經典 bug ,假如先界定了 display:inline-block,随后再将 display 设回 inline 或 block,layout 不容易消退)。编码以下(…为省略的别的特性內容):

div {display:inline-block;...}div {display:inline;}
2、立即让块元素设定为内联目标呈递(设定特性 display:inline),随后开启块元素的 layout(如:zoom:1 等)。编码以下:

div {display:inline; zoom:1;...}