北漂IT民工 的博客

ie6/ie7下的inline-block经典bug的解决

1.先定义元素为

#id {

display: inline-block;

}

2.然后再定义他为

#id

{

display: inline;

}

这样IE6/IE7下的效果就是真正的inline-block了.


注:有时候如果在FireFox上对于所定义的块还有其它的要求的话,你可以加上红色的小点.

这个小点只有IE系的浏览器能识别出来.并且不会影响到其它非IE浏览器对DOM元素的属性的修改.


3.对于低版本的FF,我们可以使用-moz-inline-stack


4.所以总共加起来就是下面这样:

#id

{

display: -moz-inline-stack; /Firefox only code/

display: inline-block; /
some standard browsers/

zoom: 1; /
IE only/
display: inline; /Only IE know this code (CSS Hack)/

}


注:已经将原来的//的注释修改成了/ /.