1回答

• 

  偷懒的小懒猪

  2018-06-26 17:32:02

  已采纳

  ie7及更低版本的ie浏览器不支持display:inline-block这个属性！ 
  正确的解释是”使用inline-block属性在IE下会触发layout，因此元素上设置的width、height是能生效的，所以也就有了同其它浏览器一致的显示效果”,而不能说IE6/7支持 display:inline-block！

  在IE下，display: inline-block只是触发了元素的layout。比如将display: inline-block设置到div上，只能保证这个div拥有块元素的特征（可以设置宽度，高度等），但还是会产生换行。接下来要设置display: inline，使其不产生换行。将display:inline-block;*display:inline;写在同一个样式上，inline-block属性是不会触发元素的layout的，因此我们还要额外加上 *zoom:1来触发layout!

  IE7下块元素如何兼容 display:inline-block写法

  方法1：直接让块元素设置为内联对象呈递（设置属性 display:inline），然后触发块元素的 layout（如：zoom:1等）。兼容各浏览器的代码如下： div {display:inline-block;*display:inline; *zoom:1;…}

  解释：dispaly:inline-block照顾的是ie8+的浏览器，这是正常的设置，在低版本的ie下设置行内块有2个条件，一个是行内，一个是设置宽高，触发layout即可设置宽高，而div设置了宽高后还是会换行，layout不是为水平而设置的，所以为块级元素转行内块加上了*display：inline属性，但是display：inline不会触发layout，于是加上zoom：1重新触发layout，于是就形成了一个可以“设置宽高的行内元素”

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

  
  

  1 0

  jindon...

  非常感谢！

  2018-07-02 16:26:03

  共 1 条回复 >