IE6/IE7下对display:inline-block的支持性不好。

1、inline元素的display属性设置为inline-block时,所有的浏览器都支持;
2、block元素的display属性设置为inline-block时,IE6/IE7浏览器是不支持的;
      对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行,允许空格。(准确地说,应用此特性的元素现为内联对象,周围元素保持在同一行,但可以设置宽度和高度等块元素的属性)
     IE中对内联元素使用display:inline-block,IE是不识别的,但使用display:inline-block在IE下会触发layout,从而使内联元素拥有了display:inline-block属性的表征。从上面的这个分析,也不难理解为什么IE下,对块元素设置display:inline-block属性无法实现inline-block的效果。这时块元素仅仅是被display:inline-block触发了layout,而它本身就是行布局,所以触发后,块元素依然还是行布局,而不会如Opera中块元素呈递为内联对象。
 
IE6下块元素如何实现display:inline-block的效果?
有两种方法:
1、 先使用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(两个display 要先后放在两个CSS声明中才有效果,这是IE的一个经典bug,如果先定义了display:inline-block,然后再将display设回 inline或block,layout不会消失)。代码如下(...为省略的其他属性内容):

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

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

div { display:inline-block; _zoom:1;_display:inline;} /*推荐*/
div { display:inline-block; _zoom:1;*display:inline;} /*推荐:IE67*/

 
 
 
转载:http://www.cnblogs.com/leejersey/archive/2012/07/11/2586506.html

IE6/IE7中display:inline-block解决办法的更多相关文章

  1. IE6/IE7下margin-bottom失效兼容解决办法及双倍边距问题

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-04-08) 一.IE6/IE7下margin-bottom失效兼容解决办法 1.用padding-bottom代替:2.在 ...

  2. IE6/IE7不支持first-child的解决办法

    #sidebar li:first-child{ border-top-style:none; } #sidebar li{ border-top-width:1px; border-top-styl ...

  3. ie6,ie7,ie8 css bug兼容解决方法

    IE浏览器以不支持大量的css 属性出名,同时也因其支持的css属性中存在大量bug. 这里收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希 ...

  4. ie6,ie7,ie8 css bug兼容解决记录

    ie6,ie7,ie8 css bug兼容解决记录 转载自:ie6,ie7,ie8 css bug兼容解决记录 - 前端开发 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面 ...

  5. 【转】 IE6 IE7 IE8 css bug兼容性解决方法总结归纳

    1:li边距“无故”增加 任何事情都是有原因的,li边距也不例外. 先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头脑,仔细“研究”发现是 ...

  6. IE6/IE7中li底部4px空隙的Bug

    当li的子元素中有浮动(float)时,IE6/IE7中<li>元素的下面会产生4px空隙的bug. 代码如下: <ul class="list"> < ...

  7. IE6/IE7中li底部4px的Bug

    当li的子元素中有浮动(float)时,IE6/IE7中<li>元素的下面会产生4px空隙的bug. XHTML <ul class="list"> < ...

  8. vsftp在REDHAT,CENTOS 5中登录慢的解决办法

    vsftp在REDHAT,CENTOS 5中登录慢的解决办法 vsftp在REDHAT,CENTOS 5中不仅登录慢,至少花30秒左右,而且上传文件的速度也受影响, 经过摸索,根本原因在DNS解析上花 ...

  9. linux中tomcat内存溢出解决办法

    用命令 tail -f /root/apache-tomcat-6.0.20/logs/catalina.out(需要找到tomcat路径) 查看日志,查看是否有错误 linux中tomcat内存溢出 ...

随机推荐

  1. 一个Java对象到底占用多大内存?

    最近在读<深入理解Java虚拟机>,对Java对象的内存布局有了进一步的认识,于是脑子里自然而然就有一个很普通的问题,就是一个Java对象到底占用多大内存? 在网上搜到了一篇博客讲的非常好 ...

  2. java笔记--反射进阶之总结与详解

    一.反射进阶之动态设置类的私有域 "封装"是Java的三大特性之一,为了能更好保证其封装性,我们往往需要将域设置成私有的, 然后通过提供相对应的set和get方法来操作这个域.但是 ...

  3. SGU 180 Inversions(离散化 + 线段树求逆序对)

    题目链接:http://acm.sgu.ru/problem.php?contest=0&problem=180 解题报告:一个裸的求逆序对的题,离散化+线段树,也可以用离散化+树状数组.因为 ...

  4. 手把手教你用Python爬虫煎蛋妹纸海量图片

    我们的目标是用爬虫来干一件略污事情 最近听说煎蛋上有好多可爱的妹子,而且爬虫从妹子图抓起练手最好,毕竟动力大嘛.而且现在网络上的妹子很黄很暴力,一下接受太多容易营养不量,但是本着有人身体就比较好的套路 ...

  5. nginx lua处理图片

    user apache apache; worker_processes 4; worker_rlimit_nofile 100000; #error_log logs/error.log; #err ...

  6. scrapy和selenium结合抓取动态网页

    1.安装python (我用的是2.7版本的) 2.安装scrapy:   详情请参考 http://blog.csdn.net/wukaibo1986/article/details/8167590 ...

  7. 使用Webdriver执行JS小结

    首先,我们使用如下方式初始化driver: WebDriver driver = new FirefoxDriver(); JavascriptExecutor jse = (JavascriptEx ...

  8. MFC 相关文件夹、文件操作

    //关于文件(夹)操作,可以参考下SHFileOperation这个外壳函数,貌似可以显示进度条.以下没有使用SHFileOperation//删除一个文件夹下的所有内容void myDeleteDi ...

  9. VS2010中“工具>选项中的VC++目录编辑功能已被否决”解决方法

    转自:http://blog.csdn.net/chaijunkun/article/details/6658923 这是VS2010的改变,不能够在“工具-选项”中看到“VC++目录”了. 但是呢, ...

  10. java静态与非静态区别

    这里的静态,指以static关键字修饰的,包括类,方法,块,字段. 非静态,指没有用static 修饰的. 静态有一些特点: 1.全局唯一,任何一次的修改都是全局性的影响 2.只加载一次,优先于非静态 ...