IE6/7下display:inline-block解决方案

参考资料： 怿飞博客：display:inline-block的深入理解 w3school:display 导航：

• display属性
• 怎么让IE6/7实现inline-block效果？

一、display属性 先详细了解display:inline,block和inline-block三个属性的特点： block：总是在新行上开始，高度、行高、顶和底边距都可以控制，不设置宽度时，宽度时容器的100%。eg:<div><p><form><h1><ul><li>. inline：和其他元素在一行上，高度、行高、顶和底边距都不可改变，宽度就是它的文字或图片的宽度。eg:<span><a><label><input><em><strong> inline和block可以控制一个元素的行宽高等特性，需要切换的情况如下：

• 让一个inline元素从新行开始；
• 让块元素和其他元素保持在一行上；
• 控制inline元素的宽度（对导航条特别有用）；
• 控制inline元素的高度；
• 无须设定宽度即可为一个块元素设定与文字同宽的背景色。

inline-block:将对象呈递为内联对象，但是对象的内容作为块元素呈递，旁边的内联对象会呈递在同一行，允许空格。 在IE6/7中无法识别display:inline-block，但使用display:inline-block在IE下会触发layout，从而使内联元素拥有了display:inline-block属性的表症。从上面的这个分析，也不难理解为什么IE下，对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout，而它本就是行布局，所以触发后，块元素依然还是行布局。 二、怎么让IE6/7实现inline-block效果？ 有两种方法： 1、先使用display:inline-block属性触发块元素，然后再定义display:inline，让块元素呈递为内联对象（两个display有先后顺序）。代码如下（...为省略的其他属性内容）： div {display:inline-block;} div {display:inline;} 或 div{dispaly:inline-block; _display:inline; _zoom:1; } 2、直接让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1等）。代码如下： div {display:inline; zoom:1;} 效果：