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. HDOJ 2389 Rain on your Parade

     HK.... Rain on your Parade Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 655350/165535 K ...

  2. NSArray和NSMutableArray

    //1. NSArray EOItems *eOItems = [[EOItems alloc] init]; eOItems.ID = [NSNumber numberWithInt:]; NSAr ...

  3. MFC加载皮肤 转自:http://www.cctry.com/thread-4032-1-1.html

    VC皮肤库SkinSharp 1.0.6.6的使用: SkinSharp又称Skin#,是Windows环境下一款强大的换肤组件.SkinSharp作为换肤控件,只需要在您的程序中添加一行代码,就能让 ...

  4. linux下软件安装的方法

    linux下软件的安装与卸载   第一章   linux下安装软件,如何知道软件安装位置 注:一般的软件的默认安装目录在 jdk-1_6_0_14-linux-i586-rpm.bin    ←修改为 ...

  5. RO05 - 如何编写RemObjects SDK服务端 (Delphi Version)

    转载:http://blog.csdn.net/henreash/article/details/2261134 本文档向你展示如何使用RemObjects(Delphi版)创建第一个服务.读了本文档 ...

  6. total commander相关设置

    一. 中文语言包 在官方网站上提供有简体中文语言包,下面的说明以此为准.下载的语言包放至Total Commander安装目录下的Language子目录中.从菜单“Configuration”→“Op ...

  7. tmux简单使用指南

    一, ubuntu安装tmux sudo apt-get install tmux 二, tmux使用 1)打开shell,输入命令tmux,,shell下边会出现绿色状态条 2)然后同时按下ctrl ...

  8. Rehashing

    The size of the hash table is not determinate at the very beginning. If the total size of keys is to ...

  9. 【leetcode】Letter Combinations of a Phone Number

    Letter Combinations of a Phone Number Given a digit string, return all possible letter combinations ...

  10. Django的Context和RequestContext

    参考:http://www.dannysite.com/blog/38/ Django的模板渲染中,Context可以用来传递数据,一个Context是一系列变量和值的集合,它和Python的字典有点 ...