zoukankan      html  css  js  c++  java
  • 关于ie7下display:inline-block;不支持的解决方案

    今天码的时候遇到这个问题了。

    如果本身是内联元素的,把它的display属性设置设置为inline-block时,所有浏览器都是支持的。

    相反,如果本身是块级元素的,把它设为display:inline-block;  那么ie6/ie7都是不支持的。

    IE中对内联元素使用display:inline-block,IE是不识别的,但使用display:inline-block在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表征。

    这时块元素仅仅是被display:inline-block触发了layout,而它本身就是行布局,所以触发后,块元素依然还是行布局,而不会如Opera中块元素呈递为内联对象。

    解决方案:

    1.(这个是我这次使用的)

    直接让块元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的layout(如:zoom:1 或float属性等)。代码如下:
      /*推荐:IE6、7*/ div { 

                                     display:inline-block;

                                    *zoom:1;

                                    *display: inline;

                                   }

    三者缺一不可

            /*推荐*/div {

                              display:inline-block;

                             _zoom:1;

                             _display:inline;

                            } 

    2、(copy过来)

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

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

  • 相关阅读:
    [saiku] 系统登录成功后查询Cubes
    216. Combination Sum III
    215. Kth Largest Element in an Array
    214. Shortest Palindrome
    213. House Robber II
    212. Word Search II
    211. Add and Search Word
    210. Course Schedule II
    分硬币问题
    开始学习Python
  • 原文地址:https://www.cnblogs.com/qiao20/p/6774888.html
Copyright © 2011-2022 走看看