深入理解 display:inline-block – 学习画板

首页 » 记事本 » 深入理解 display:inline-block

深入理解 display:inline-block

应用inline-block特性的元素呈现为内联对象,与周围内联元素保持在同一行,可以设置宽度和高度地块元素的属性,此元素之间允许空格。

浏览器对display:inline-block的支持:

目前支持的浏览器有:Internet Explorer 8、Internet Explorer 9、 Firefox、Chrome、Opera、Safari等相对标准浏览器。

Internet Explorer低版本的浏览器不支持display:inline-block,但是会触发IE/Win 的私有概念hasLayout ,从而使内联元素拥有了display:inline-block 属性的假象。

块级元素(div、h1-h6、p、ul、li、dl、dt、dd …)设置 display:inline-block 属性无法实现呈递为内联对象的效果,因为块元素本身就拥有hasLayout。

行内元素(a、img、span、b、i、em、strong …)设置 display:inline-block 属性触发hasLayout,所以可以实现呈递为内联对象的效果。

Internet Explorer低版本的浏览器块元素呈现为内联对象

1.先使用 display:inline-block 属性触发块元素,然后再定义 display:inline,让块元素呈递为内联对象。

display:inline-block;
display:inline;

 

2.直接让块元素设置为内联对象呈递(设置属性 display:inline),然后触发块元素的 layout(如:zoom:1 等)。

display:inline;
zoom:1;

 

此文章发表在 记事本. 将 固定链接 加入收藏.