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;}

  • 相关阅读:
    JavaScript中的闭包
    SQL 备忘
    SqlServer 2005 升级至SP2过程中出现"身份验证"无法通过的问题
    unable to start debugging on the web server iis does not list an application that matches the launched url
    Freebsd 编译内核
    Freebsd 6.2中关于无线网络的设定
    【Oracle】ORA01219
    【Linux】Windows到Linux的文件复制
    【Web】jar命令行生成jar包
    【Linux】CIFS挂载Windows共享
  • 原文地址:https://www.cnblogs.com/qiao20/p/6774888.html
Copyright © 2011-2022 走看看