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不会消失)。
   2、直接让块元素设置为内联对象呈递(设置属性display:inline),然后触发块元素的layout(如:zoom:1 或float属性等)。代码如下:
      div { display:inline-block; _zoom:1;_display:inline;} /*推荐*/
      div { display:inline-block; _zoom:1;*display:inline;} /*推荐:IE67*/

IE6/IE7下:inline-block不兼容的问题的更多相关文章

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

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

  2. IE6/IE7下:inline-block解决方案

    IE6/IE7下对display:inline-block的支持性不好. 1.inline元素的display属性设置为inline-block时,所有的浏览器都支持: 2.block元素的displ ...

  3. 空a标签 a标签空的情况下 IE6 IE7下点击无效

    最近做了好多网站专题页面,因为专题页面图片较多,个别banner上有1个到多个按钮,一种是用“图解img标签的usemap”的方法做链接,(图解img标签的usemap使用方法)[传送门] 另一种用则 ...

  4. ie6,ie7下设置overflow:auto下滚动条不起作用

    今天遇到一个比较特殊的情况:ie6,ie7下设置overflow:auto下滚动条出来了但是滚动条不起任何作用,但在火狐,ie8,ie9,谷歌等浏览器下正常显示,解决方案:只需要加一个position ...

  5. 一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行

    一句white-space:nowrap解决IE6,IE7下浮动元素不自动换行

  6. inline-block和text-indent在IE6,IE7下同时使用的兼容问题解决方法

    在实际应用中,考虑到seo,很多button,icon都要用到inline-block和text-indent来处理,例如: <a href="#">Button< ...

  7. IE6/IE7下绝对定位position:absolute和margin的冲突问题解决

    首先我们来看一个代码: 复制代码代码如下:<div id=”layer1″ style=”margin:20px; border:1px solid #F88; width:400px; “&g ...

  8. JavaScript在IE6,IE7下报错'expected identifier, string or number'

    问题: 代码在Forefox和IE8下工作正常,但是在IE6下报错: expected identifier, string or number 假如变量options有多个选项,那么我们可以用逗号分 ...

  9. ie6 ie7下报脚本错误"Expected identifier, string or number" 的原因和解决方法

    在IE6和ie7里面,脚本报错"Expected identifier, string or number" 写下这个是个之前我已经很头疼了,因为我的代码在其他浏览器里都是正常的, ...

随机推荐

  1. Android ListView 中加入CheckBox/RadioButton 选择状态保持、全选、反选实现

    最近在一个项目中,需要在ListView的item中加入CheckBox,但是遇到的一个问题是上下滑动的时候如果有选择了的CheckBox,就会出现选择项错误的问题,下面将个人的解决方法总结如下;先说 ...

  2. BZOJ4200 & 洛谷2304 & UOJ132:[NOI2015]小园丁与老司机——题解

    https://www.lydsy.com/JudgeOnline/problem.php?id=4200 https://www.luogu.org/problemnew/show/P2304 ht ...

  3. BZOJ4034:[HAOI2015]树上操作——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=4034 https://www.luogu.org/problemnew/show/P3178 有一棵 ...

  4. 在linux服务器上搭建相对安全的FTP服务器

    一.如何在Linux服务器上安装vsftp不在多说,直接介绍如何进行安全性配置: 二.编辑vsftp.conf文件 关键配置项如下: anonymous_enable=NO /禁止匿名用户登录 loc ...

  5. The Usage of Pymongo

    Install pymongo document install pymongo from the tar package download from website python setup.y i ...

  6. shell运用

    在shell脚本一 中,我讨论了shell脚本的语法规范,shell脚本的变量,以及shell脚本的测试语句. 仅仅懂得这些只能写简单的脚本,在简单的脚本中各条语句按顺序执行,从而实现自动化的管理,顺 ...

  7. HDU4625:Strongly connected(思维+强连通分量)

    Strongly connected Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Other ...

  8. ACM1829并查集

    A Bug's Life Problem Description Background Professor Hopper is researching the sexual behavior of a ...

  9. git 回退

    回退命令: $ git reset --hard HEAD^ 回退到上个版本$ git reset --hard HEAD~3 回退到前3次提交之前,以此类推,回退到n次提交之前 $ git rese ...

  10. HUST 1103 校赛 邻接表-拓扑排序

    Description N students were invited to attend a party, every student has some friends, only if someo ...