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*/

IE6/IE7下:inline-block解决方案的更多相关文章

  1. IE6/7 下:inline-block解决方案

    6/IE7下:inline-block解决方案   IE6/IE7下对display:inline-block的支持性不好. 1.inline元素的display属性设置为inline-block时, ...

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

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

  3. IE6/IE7下:inline-block不兼容的问题

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. JQuery多媒体插件jQuery Media Plugin使用详解

    malsup jquery media plugin 该插件可以播放多种类型的多媒体文件包括:Flash, Quicktime, Windows Media Player, Real Player, ...

  2. js对cookie的操作,包括增,取,删

    在其他人都开会到时间里,我偷偷摸哦的试了一下cookie,唉,从来没有用过cookie,慢慢的知识忘光了,还好这次偷偷摸摸的做出来了,虚,大家都别出声啊 <!DOCTYPE html> & ...

  3. [SAP ABAP开发技术总结]几个小问题

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  4. poj 1502 最短路+坑爹题意

    链接:http://poj.org/problem?id=1502 MPI Maelstrom Time Limit: 1000MS   Memory Limit: 10000K Total Subm ...

  5. 2.mybatis入门实例 连接数据库进行查询

    1.新建项目,添加mybatis和mysql的jar包 2.在mysql中新建表user[id,name,age] CREATE TABLE `users` ( `id` ) NOT NULL aut ...

  6. implement "slam_karto" package on a Freight robot

    1. login ssh fetch@<robot ip or robot name> 2.  set robot master modify .bashrc in robot's com ...

  7. STORM_0010_Message passing implementation/消息传递的实现

    下面是0.8.0之前的表述,之后的已经基于Disruptor改造过了 这个文章演示了发射和转移tuple是怎么在storm中工作的   Worker为消息传递负责 当zk中的任务出现了变化或者每个ta ...

  8. LTE Module User Documentation(翻译6)——物理误差模型、MIMO模型、天线模型

    LTE用户文档 (如有不当的地方,欢迎指正!) 9 PHY Error Model   物理误差模型包含数据误差模型和下行控制误差模型,两者默认为激活.可以使用 ns-3 属性系统去激活,具体为:   ...

  9. 最牛叉的街机游戏合集 & 模拟器

    亲爱的小伙伴们,是否还记得那年我们玩的疯狂的街机游戏吗,街机中心提供400多个街机游戏,让你爽到底. 例如:拳皇96,拳皇97,恐龙新世纪.名将.快打旋风.惩罚者.魂斗罗.超级玛丽.雪山兄弟.忍者神龟 ...

  10. 键盘控制div移动

    <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...