展会信息港展会大全

css dispay:inline-block在不同浏览器用法分析
来源:互联网   发布日期:2016-03-25 16:31:03   浏览:2443次  

导读:将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。按照这个解释:支持的浏览器有(ie8,ie9,chrome,firefox3.6+,由于我是...

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

按照这个解释:支持的浏览器有(ie8,ie9,chrome,firefox3.6+,由于我是用firefox3.6测试的) ,ie6,ie7 是不支持这个属性的。

ie6,7 如何支持这个属性呢?

对于块级元素,直接让块级元素成行内元素, 然后再触发layout。 {display:inline;zoom:1},可能有的同学会说,怎么说ie6,7不支持这个元素呢?

我不是经常在ie6,7的a标签、span 下使用这个属性吗?也起到了作用,这里理解可能有一个误区,使用display:inline-block是触发了layout的原因。

另外一种方式就是先触发块级元素的layout 属性,然后再让他成内联元素来展现。比如p元素,可以这样写 p{display:inline-block}p{display:inline}

display:inline-block可以用来做什么?

可以做的事情很多,可以写顶部的菜单,可以图文混排,可以内嵌block元素,也可以至如inline元素中,可以做信息卡片,如百度空间搭讪有缘人的卡片有缘人纪念日的固定宽度的书写,当然也可以做布局。 万变不离其宗,我觉得最本质的就是利用它的使元素为内联对象,但是内容做块状呈递。这点我们应该牢记。只要理解了它的本质东西,我们才可以以不变应万变,甚至可以创造自己的东西。

使用它要注意什么呢?

在使用了display:inline-block的元素之间有换行符,空格间隙问题。

1.块状元素被设置了display:inline-block后,ie6,7没有空格问题。其他浏览器都有。如下图所示:

在ie8,ie9,firefox可以通过使用font-size:0来解决,但是chrome很悲剧。还是有空白,我使用的是chrome10。不能清除。 可以通过添加letter-spacing属性

的值来解决,建议作者通过尝试来解决这个问题。我设置的值是-8px刚才好清除空白。我担心这会不会有相互覆盖问题。后来我将值调大到-28px,果然,在chrome中有覆盖,但是在其他的浏览器中没有。可见解决这个问题以chrome为主。

2.内联元素被设置了display:inline-block后,所有的浏览器都有换行,空白间隙问题

display:inline-block

将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内,允许空格。但对于这个属性不是所有浏览器都识别。

支持的浏览器有:opera、safari.但很遗憾,最流行的ie和firefox却不支持这个属性(据说下一版本的firefox将会支持display:inline-block)。不过firefox下却有私有属性-moz-inline-box和inline-block形似,为什么是“形似”而不是“神似”呢?这是因为使用-moz-inline-box会带来很多意想不到的后遗症,比如使用这一属性后,text-align有时候就会有问题,还得改用firefox的私有属性-moz-box-align来解决。

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

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

其实不然,在ie中对内联元素使用display:inline-block,ie是不识别的,但使用display:inline-block在ie下会触发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不会消失)。代码如下(...为省略的其他属性内容):

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

div {display:inline;}

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

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

赞助本站

人工智能实验室

相关热词: 开发 编程 android

AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港