或许有朋友会对IE不支持 display:inline-block 属性,表示疑问或者反对。说:“我在 IE 中对 a 或者 span 等内联元素使用 display:inline-block 一直是有效的”。

其实不然,在IE中对内联元素使用 display:inline-block,IE 是不识别的,但使用 display:inline-block 在 IE 下会触发 layout, 从而使内联元素拥有了display:inline-block 属性的表症。从上面的这个分析,也不难理解为什么 IE 下,对块元素设置 display:inline-block 属性无法实现 inline-block 的效果。这时块元素仅仅是被 display:inline-block 触发了 layout,而它本就是行布局,所以触发后,块元素依然还是行布局,而不会如 Opera 中块元素呈递为内联对象。

IE下块元素如何实现 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 等)。代码如下:

div {display:inline; zoom:1;...}

IE6兼容inline-block的方法的更多相关文章

  1. 完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

    完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法   HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页 ...

  2. HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

    这篇文章主要介绍了HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法,需要的朋友可以参考下 HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面 ...

  3. ie6兼容问题汇总

    这几天在查找和解决网页在ie6下的兼容性问题花了我不少的时间,参考了网上的一些解决方法和自己做出来比较有效果的给大家参考一下,也方便我日后再用到: 1.IE的cache设置为Every visit t ...

  4. 常见IE6兼容问题总结

    1.<!DOCTYPE HTML>文档类型的声明. 产生条件:IE6浏览器,当我们没有书写这个文档声明的时候,会触发IE6浏览器的怪异解析现象: 解决办法:书写文档声明. 2.不同浏览器当 ...

  5. 让IE6兼容position:fixed

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 关于onscroll函数兼容各浏览器的方法分析

    关于window.onscroll函数兼容各浏览器的方法分析 1.当前文档的渲染模式是决定onscroll函数兼容性根本原因 目前浏览器的排版引擎有三种模式:怪异模式(Quirks mode).接近标 ...

  7. block做方法参数时--block的参数传值过程 例1

    说明:此例子中方法的调用在此文中是从下到上调用的.(即:     方法五调用方法四:      方法四调用方法三) 方法一:- (void)setCompletionBlockWithSuccess: ...

  8. 2018-01-28-TF源码做版本兼容的一个粗暴方法

    layout: post title: 2018-01-28-TF源码做版本兼容的一个粗暴方法 key: 20180128 tags: IT AI TF modify_date: 2018-01-28 ...

  9. html5.js让IE(包含IE6)支持HTML5元素方法

    原文地址:http://blog.sina.com.cn/s/blog_62a36ec401018oqb.html html5.js让IE(包含IE6)支持HTML5元素方法 微软的最新浏览器IE8及 ...

  10. PNG24在ie6下的完美解决方法!(DD_belatedPNG)

    原网址:http://www.zjgsq.com/1629.html 之前写过一篇<js+css滤镜设置解决PNG24在IE6下显示问题> 解决方法不是很完美,使用起来也比较麻烦. DD_ ...

随机推荐

  1. Jmail发送邮件与带附件乱码解决办法

    Jamil发送邮件的具体用法: 首先,我们要从网上下载Jamil.dll的组件,这个网上很多,然后添加引用using jmail,然后再本机或者服务器上注册一下 将jmail.dll拷贝到服务器的sy ...

  2. 在调用“Fill”前,SelectCommand 属性尚未初始化

    在调用“Fill”前,SelectCommand 属性尚未初始化 是因为少写了一行代码: private readonly string strConnection = System.Configur ...

  3. CustomTabBarViewController

    // AppDelegate.m // CustomTabBar // // Created by qianfeng on 15/7/9. // Copyright (c) 2015年 qianfen ...

  4. AMQ学习笔记 - 21. 异步发送

    原文地址:Async Sends 背景 ActiveMQ支持同步.异步两种发送的模式将消息发送到broker,模式的选择对发送延时有巨大的影响.producer能达到怎样的产出率[1],主要受发送延时 ...

  5. 《JavaScript高级程序设计》心得笔记-----第五篇章

    第二十二章 1.  安全的检测是使用:Object.prototype.toString.call(value); eg: function isArray(value){ return Object ...

  6. CPU卡及NFC供应商

    1.苏州市民卡供应商 北京握奇数据/watchdata 2.苏州市民卡手表 苏州连爱/linklove公司 3.NFC供应商 英飞凌/Infelion, NXP,复旦微电子, 4.什么是CPU卡? C ...

  7. c++11: bind用法

    原型: template< class R, class F, class... Args > bind( F&& f, Args&&... args ); ...

  8. javascript中的光标

    最近项目中要做一个键盘操作,光标移动的功能:增强用户体验:问朋友查资料了解到这方面的知识:整理备忘: 1.IE使用textRange对象,其他使用selectionStart selectionEnd ...

  9. Windows下MySQLroot密码破解

    Win下MySQL修改root密码的多种方法       ##win2003mysql的密码破解 方法1: 用SET PASSWORD命令 mysql -u root mysql> SET PA ...

  10. (三)开始在OJ上添加签到功能

    在了解完OJ文件下的各个文件夹的主要作用后,我们开始往里面添加东西(其实只要知道各文件夹是干什么的后,添加东西也变得非常简单了) 一 在数据库中添加对应功能的字段. 我们这个学期才刚开数据库这门课,所 ...