zoukankan      html  css  js  c++  java
  • display:inline-block在IE6/Ie7和IE8中的区别

    在IE6、IE7中不识别display:inline-block属性,但使用inline-block属性在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表症。从上面的分析也不难理解为什么IE6、IE7下对块元素设置 display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被inline-block触发了 layout,而它本就是行布局,所以触发后,块元素依然是行布局。IE8识别display:inline-block;
    在IE6、IE7中实现块元素的inline-block效果有以下两种方法:1先使用display:inline-block属性触发layout,然后再定义display:inline让块元素呈现内联对象(两个display要先后放在两个CSS声明中才有效果,这是IE的一个经典BUG)。2 直接将块元素设置为display:inline呈现为内联对象,然后触发layout(如zoom:1)。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.jinyuanbao.cn">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style type="text/css">
    body{text-align:center;}
    .inlineBlock{100px;height:100px;border:1px solid #FF7900;margin:8px;display:inline-block;text-align:center;}
    .inline{*display:inline;}
    .layout{zoom:1;display:inline-block;}
    </style>
    </head>
    <body>
    <div class="inlineBlock inline">1</div>
    <div class="inlineBlock inline">2</div>
    <div class="inlineBlock inline">3</div>
    </body>
    </html>
    

      

    个人作品展示:www.jinyuanbao.cn
  • 相关阅读:
    批处理压缩iis日志
    centos6 安装wkhtmltopdf 生成pdf
    SpringMVC
    MVC的了解
    Eclipse创建SpringMVC,Spring, Hibernate项目
    mysql表基本查询
    JVM垃圾回收机制与内存回收
    mysql外键(Foreign Key)的使用
    MyEclipse做的项目改成eclipse能用的
    invalid location of tag 解决办法
  • 原文地址:https://www.cnblogs.com/jyb2014/p/3929534.html
Copyright © 2011-2022 走看看