ie6 ie7 的div 对 display:inline-block的解析

项目需要做个投票的样式：如图

 

看了原来的项目是用table 吧文字和票数条分开的

 

为了不用table，于是想到了div，为了能在同一行显示，就把div 的样式加上 display:inline-block;

 

经过一系列的设置后，在ie8 和ff下可以完美的展现了。

 

在ie6下一看~oh my god ！！票数条和文字不在同一行，再在ie7下看，和ie6一样~~

 

想起以前设置按钮时，也是吧 a 设置为 display:inline-block; 就可以设置宽高，可以在同一行显示的。div怎么不行了？

 

于是想是不是块元素都不能实现 display:inline-block;的效果，

 

拿起笔实验，哦，不是，是敲键盘实验。果真。。。。块元素 在ie 6 ，ie7下无法实现 inline-block的效果。

 

 

 

google  块元素 display:inline-block

 

原来也有办法让块元素实现display:inline-block

 

 

方法摘如下：

有两种方法：

1、先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（两个display要先后放在两个CSS声明中才有效果，这是IE的一个经典bug，如果先定义了display:inline-block，然后再将display设回inline或block，layout不会消失）。代码如下（...为省略的其他属性内容）：

 

div {display:inline-block;...}
div {display:inline;}

 

2、直接让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1等）。代码如下：

 

div {display:inline; zoom:1;...}