关于火狐不解析display:block标签 你遇到过火狐浏览器不解析display:block标签吗？你遇到过吗？你遇到过吗？你遇到过吗？！！！！！今天！！今天，居然神奇的遇到这种事情了！！事情的原因是这样的，在写CSS的时候，突然发现，FF不兼容了！这是为什么呢？经过反复调试，原来是<ul></ul>没有模块化导致的！然后就果断的写了一个display:block；上去！然后发现~没效果= =！没效果，然后我用firbug查看CSS，display:block根本没有加进去！经过苦思冥想，突然在DW的代码提示里面看到了display:inline-block;这个代码！然后果断加上去！！OK，搞定了！下面我们来解析一下这个标签到底是个神马情况！！注：下文中提到的FF不支持这个属性是指4.0以前的版本，FF4.0版本能正常解析这个标签！ 很多时候我们必须使一些块元素并排显示，一般想到的是必须使用浮动，但是块元素浮动给边距(margin)的时候在IE下会出现加倍的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”--乌龙茶 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 div2、直接让块元素设置为内联对象(display:inline)，然后通过zoom:1触发块元素的layout，代码如下： div那么为了能够让所有浏览器支持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值*/