css中display:inline-block

时间：2014.07.09 发布人：cc_mike
css中display:inline-block

已解决问题

谷歌cc_mike用户在2014.07.09提交了关于“心灵捕手css中display:inline-block”的提问，欢迎大家涌跃发表自己的观点。目前共有1个回答，最后更新于2024-08-17T17:56:52。display:inline-block好象只能在span,a等元素上起作用，在ul,li,div上怎么不起作用呢，好想不是说它的兼容也有问题的，那它到底有哪些问题的，各位高手帮助一下小弟．谢谢了，高分．希望大家能够帮助她。

详细问题描述及疑问：display:inline-block好象只能在span,a等元素上起作用，在ul,li,div上怎么不起作用呢，好想不是说它的兼容也有问题的，那它到底有哪些问题的，各位高手帮助一下小弟．谢谢了，高分．期待您的答案，你无异于雪中送炭,让我感激涕零 ！

希望以下的回答，能够帮助你。

第1个回答

用户名：梦旋5982653  

很多时候我们必须使屋岁一川式著肉一些块元素并排显示，一般想到的是必须使用浮动，但是块元素浮动给边距(margin)的时未顶拉气事品红妒倒候在IE下会出现加倍的BUG，所以很多时候不得不把这个块元素套在一个内联元素里面，然后给内联元素浮动和边距。今天看到了怿飞、秦歌和乌龙茶关于display:inline-blo来自ck的文章，很不顺跟叶错，综合一下，记录下来。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、先用di的罗乡培splay: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触发块元素的lay洋纪肥师整江out，代码如下：div{display:inlin谓阻职令地担十回四几e;zoom:1;}那么为了能够让所有浏览器支持display:inline-block，综合一下，最终的实现代码如下（参考怿飞：模拟兼容性的inline-b略lock属性）：display:inline-block;/*一方面Firefox3beta、IE8b发排够苏决去费阿跳科eta、Opera、Safari支持，另鲁角一方面下触发IE下刑压逐威蒸效参硫耐inline元素的hasLayout*/display:-moz-inline-stack;/*Firefox的私有属性，需要时还必须用到position:relative解决上面提到的bug*/zoom:1;/*同样是IE士调下触发hasLayout*/*display:inline;/*一旦IE下触发了hasLayout，设置block元素为inline会使display:in血统限地村乎line效果与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值*/