继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

display: inline-block;*display:inline;*zoom:1;

qq_唔叫咩_0
关注TA
已关注
手记 13
粉丝 3
获赞 9

一般想到的是必须使用浮动让一些块元素并排显示,但给边距(margin)的时候会出现BUG。解决方法:将块元素套在一个内联元素里面,然后给内联元素浮动和边距。
今天看到了怿飞、秦歌和乌龙茶关于——display:inline-block ——的文章,很不错,综合一下,记录下来。
display:inline-block
作用:将对象呈递为内联对象(旁边的内联对象会被呈递在同一行内,允许空格。),对象的内容作为块对象呈递。
只有Opera和Safari支持这个属性,FireFox3和IE8据说 将 会支持,Firefox2和IE使用 特殊办法 可以实现这种效果。
下面就来探讨一下在Firefox2中有-moz-inline-stack和-moz-inline-box实现,但是这两个私有属性在某些情况下都会有异常,具体如下:
1、display:-moz-inline-stack
“当它所应用的外包装器(wrapper)的display为inline的时候,它所包含的a或button将无法点击或无法选取,需要通过position:relative还hack掉这个bug”--乌龙茶。(怎么去掉?????也就是说不能用display,只能用position???)

2、display:-moz-inline-box

使用这一属性后,text-align就会出问题,必须使用Firefox的私有属性 -moz-box-align来解决

所以,建议不要使用-moz-inline-box,还是使用-moz-inline-stack
在IE(以下IE8除外)下,如果对内联元素,比如a或span元素,使用inline-block属性是有效的,似乎IE是支持的,其实是触发了IE的layout,从而拥有了inline-block属性的表症。这样我们就有了一种在IE下实现display:inline-block效果的两种方法:

1、先用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(原理:这是IE的一个经典bug,如果先定义了display:inline-block,然后再设置display回inline或block,layout不会消失),代码如下:

div {display:inline-block;}

div {display:inline;}

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

div {display:inline; zoom:1;}

那么为了能够让所有浏览器支持display:inline-block,综合一下,最终的实现代码如下(参考怿飞:模拟兼容性的 inline-block 属性):display:inline-block;
display:-moz-inline-stack;zoom:1;
display:inline;
text-indent:-9999px;
text-indent:0;
font-size:0;
line-height:0;
overflow:hidden;
vertical-align:middle;
width:?px;
height:?px;

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP