display:inline-block的深入理解 BY blank

在使用CSS实现表现的时候,会经常接触到display:inline-block这一属性,无论是初接触Web标准还是接触标准已久的朋友,大都会对这一属性感觉很迷惑和模糊。

display:inline-block

将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。

但对于这个属性不是所有浏览器都识别。

支持的浏览器有:Opera、Safari

但很遗憾,最流行的IE和Firefox却不支持这个属性(据说下一版本的Firefox将会支持display:inline-block2还鼺irefox下却有私有属性-moz-inline-box和inline-block形似,为什么是“形似”而不是“神似”呢?这是因为使用-moz-inline-box会带来很多意想不到的后遗症,比如使用这一属性后,text-align有时候就会有问题,还得改用Firefox的私有属性-moz-box-align来解决(谢谢aoao提供案例)。

建议:最好不要使用Firefox私有属性-moz-inline-box。

或许有朋友会对上面所说的IE也不支持display:inline-block属性,表示疑问或者反对。说:“我在IE中对a或者span等内联元素使用display:inline-block一直是有效的”。

其实不然,在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中块元素呈递为内联对象。

延伸一个问题:IE下块元素如何实现display:inline-block的效果?

有两种方法:

1、先使用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(两个display要先后放在两个CSS声明中才有效果,这是IE的一个经典bug,如果先定义了display:inline-block,然后再将display设回inline或block,layout不会消失)。代码如下(…为省略的其他属性内容):

CODE:

div {display:inline-block;…} div {display:inline;}

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

CODE:

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Coco的专栏

谈谈一些有趣的CSS题目(四)-- 从倒影说起,谈谈 CSS 继承 inherit

882
来自专栏腾讯NEXT学位

这些 CSS 命名规范将省下你大把调试时间(文末有福利)

38110
来自专栏ytkah

excel判断单元格包含指定内容的函数用=IF(COUNTIF(A1,"*内容*"),"0","1")

  前面我们聊过怎样将Excel包含某字符的单元格填充颜色,这边我们用另外一种方法来实现:excel判断单元格包含指定内容的函数   选中需要显示结果的单元格,...

6366
来自专栏偏前端工程师的驿站

CSS魔法堂:"那不是bug,是你不懂我!" by inline-block

前言  每当来个需要既要水平排版又要设置固定高宽时,我就会想起display:inline-block,还有为了支持IE5.5/6/7的hack*display...

2088
来自专栏肖蕾的博客

第十四章:TouchPadTouchPadStyleTouchPad控件

API定义:TouchPad的样式 用法:public TouchpadStyle(Drawable background, Drawable knob) ...

652
来自专栏HTML5学堂

2016.06 第一周 群问题分享

HTML+CSS meta标签的viewport属性说明 2016.05.30~2016.06.03 核心概念 viewport(视口) 参考答案 <meta ...

2907
来自专栏程序员的诗和远方

20180818_ARTS_week08

这道题是要把字符串中的数字变成 int,通常的做法是遍历字符串,然后判断是不是在 0~9 中,如果把 0~9 放数组里每次循环检查感觉不是太好,时间复杂度是个 ...

601
来自专栏前端儿

编写高质量 JavaScript -- 知识点小记

此番改善之后,匿名function里面的变量作用域不再是window,而是局限在函数内。

1831
来自专栏我的博客

JQuery中DOM操作示例代码

Jquery的DOM操作 1、插入节点代码示例: <p title=”选择你喜欢的水果”>你最喜欢的水果是?</p> <ul> <li title=”苹果”>苹...

2694
来自专栏听雨堂

MapX中取得图元操作的速度测试

        最常见的操作,是取得图层中的某个图元。假如需要根据一个属性(无重复)来获得图元的话,发现速度相差极大。 遍历比较是最慢的。 用图层的search...

1936

扫码关注云+社区