以文本方式查看主题 - ╋艺 镇╋ (http://wdystv.com/bbs/index.asp) -- ┣◇网站建设&Web语言 (http://wdystv.com/bbs/list.asp?boardid=4) ---- inline-block (http://wdystv.com/bbs/dispbbs.asp?boardid=4&id=2708) |
-- 作者:admin -- 发布时间:2011/2/11 16:43:22 -- inline-block 简单来说就是将对象呈递为内联对象,但是对象的内容作为块对象呈递。 在css中,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”--乌龙茶
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; /*一方面Firefox3 beta、IE8 beta、Opera、Safari 支持,另一方面下触发IE下inline 元素的 hasLayout*/
display:-moz-inline-stack; /* Firefox 的私有属性,需要时还必须用到position:relative解决上面提到的bug */
zoom:1; /*同样是IE 下触发 hasLayout*/
*display:inline; /*一旦IE 下触发了 hasLayout,设置 block 元素为 inline 会使 display:inline 效果与 display:inline-block 相似*/
/*扩展一下一些其他可能用到的属性*/
text-indent:-9999px;
*text-indent:0;
font-size:0;
line-height:0; /* 如需隐藏文字,可用这四个属性 */
/*另外上面隐藏文字,还可以用更简化的方法:line-height:超级大值;font-size:0; */
overflow:hidden; /* 隐藏溢出的内容 */
vertical-align:middle; /* 行内垂直居中,针对 Opera 比较大的偏离 */
width:?px; /*?为任意非auto值*/
height:?px; /*?为任意非auto值*/
简单来说就是将对象呈递为内联对象,但是对象的内容作为块对象呈递。 在css中,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”--乌龙茶
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; /*一方面Firefox3 beta、IE8 beta、Opera、Safari 支持,另一方面下触发IE下inline 元素的 hasLayout*/
display:-moz-inline-stack; /* Firefox 的私有属性,需要时还必须用到position:relative解决上面提到的bug */
zoom:1; /*同样是IE 下触发 hasLayout*/
*display:inline; /*一旦IE 下触发了 hasLayout,设置 block 元素为 inline 会使 display:inline 效果与 display:inline-block 相似*/
/*扩展一下一些其他可能用到的属性*/
text-indent:-9999px;
*text-indent:0;
font-size:0;
line-height:0; /* 如需隐藏文字,可用这四个属性 */
/*另外上面隐藏文字,还可以用更简化的方法:line-height:超级大值;font-size:0; */
overflow:hidden; /* 隐藏溢出的内容 */
vertical-align:middle; /* 行内垂直居中,针对 Opera 比较大的偏离 */
width:?px; /*?为任意非auto值*/
height:?px; /*?为任意非auto值*/
来源: http://baike.baidu.com/view/4056169.htm |
-- 作者:admin -- 发布时间:2011/12/20 13:36:47 -- display:inline-block在IE6/Ie7和IE8中的区别: ---------------- 这样好像也行: .in_block li{ display:inline-block; } .in_block li{ *display:inline; } <ul style="width:440px; border-top:4px solid #a0b3d6; border-bottom:4px solid #34538b;" class="in_block"> <li style="border:1px solid #ff6633; background:#ffffc0;width:100px;height:100px;"></li><li style="border:1px solid #ff6633; background:#ffffc0;width:100px;height:100px;"></li> </ul> [此贴子已经被作者于2011-12-20 13:39:36编辑过]
|