设置display:inline-block;后的元素 就是一个格式化为行内元素的块容器( Block container )；通俗讲就是：将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。

支持的浏览器：目前有 safri 和 chorme 及 ie8+ 和 firefox3.6+；ie6和ie7不支持该属性；

解决办法：

　　IE6/IE7的inline-block属性只对原生默认的内联元素(span, a, em......)有效，对于块级元素(div,p,ul......)无效。
            In IE 6 and 7 inline-block works only on elements that have a natural display: inline.IE doesn't apply the value inline-block for the CSS display property on HTML elements that default to block level.
            
            两个结论： 1、IE6/7不识别inline-block，只是触发了layout，表现跟inline-block块元素表现一样。
                 　　　　2、IE6/7不完全支持inline-block，只对内联元素有效。

　　　ie6,7 块元素实现 display:inline-block效果：

　　　　div{

            display: inline-block;

            width: 350px;

            min-height: 250px;

            background-color: silver;

            margin:0 5px;

            vertical-align:top; /*垂直方向 顶部对齐，base_line为基线对齐*/

            *display: inline;    /*只用于 ie6和ie7的hack*/

            zoom:;            /*激发 ie7的 hasLayout*/

            _height:250px;        /*通过min-height 和 _height(ie6hack) 来达到相同高度效果*/

        }

　　 块状元素怎么实现display:inline-block;效果：

　　　　　　　　方法有2个： 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*/

　　触发haslayout有很多方法：

display: inline-block
* height: (任何值除了auto)
* float: (left 或 right)
* position: absolute
* width: (任何值除了auto)
* writing-mode: tb-rl
* zoom: (除 normal 外任意值)
Internet Explorer 7 还有一些额外的属性(不完全列表):
* min-height: (任意值)
* max-height: (除 none 外任意值)
* min-width: (任意值)
* max-width: (除 none 外任意值)
* overflow: (除 visible 外任意值)
* overflow-x: (除 visible 外任意值)
* overflow-y: (除 visible 外任意值)
* position: fixed

附我的demo代码一个：

<!DOCTYPE html>

<html>

  <head>

    <title>display:inline-block hack001.html</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <style type="text/css">

        *{

            margin: 0px;

            padding: 0px;

        }

        h3{

            text-align:center;

            margin: 5px auto;

        }

        div{

            display: inline-block;

            width: 350px;

            min-height: 250px;

            background-color: silver;

            margin:0 5px;

            vertical-align:top; /*垂直方向 顶部对齐，base_line为基线对齐*/

            *display: inline;    /*用于 ie6和ie7的hack*/

            zoom: 1;            /*激发 ie7的 hasLayout*/

            _height:250px;        /*通过min-height 和 _height(ie6hack) 来达到相同效果*/

        }

    </style>

  </head>

  <body>

      <p>inline-block 后的元素就是一个格式化为行内元素的块容器( Block container )</p>

      <h3>测试 demo</h3>

    <div>display:inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。

    </div>

    <div>

        这段代码在ie8以上版本显示正常，已经其他的浏览器都是正常的，而唯独在ie6,7下无效,然后通过css hack进行处理后的css为: zoom:1;*display:inline;

    </div>

    <div>

        在没有加 vertical-align:top 之前；显然，在垂直排列上有些错误。嗯，也不算错误吧，这是正确的表现，只不过不是我们想要的效果：这

        是因为每个div的基线是和其父基线对其的； 通俗的说 inline 和 inline-block 元素默认的值是 基线；也就是说元素基线要和其父元素基线对齐；

        总之，修正方法是很简单的： vertical-align: top;

        但是在IE 6 和 7 中，依然无效：IE 7 也不支持 inline-block，但是我们可以欺骗它以使 div 好像是 inline-block 的。

        怎么做呢？hasLayout，IE 的一个带来乐趣的神奇属性。你无法在一个元素上用 hasLayout: true; 显示地设置 hasLayout，或通过其他类似的简单方法，

        但是可以用其他类似 zoom:1 的声明来激发它。(技术上来说，hasLayout 意味着，一个 hasLayout 设为 true 的元素负责渲染它自己及其子元素);

        当我们给 div 加上 zoom:1 和 *display:inline(用于 IE6 和 IE7 的星号 hack) 之后，

        在 IE7 中它们就可以像 inline-block 一样显示了;

        只剩 IE 6 了：IE6 不支持 min-height，但是多亏它对 height 属性的不正确处理，我们可以用它来代替。

        把 _height(IE6 下划线 hack) 设为 250px 使所有的 div 元素高度为 250px，并且如果它们的内容大于 250px，他们会扩大来适应。

        其他所有的浏览器会忽略 _height。

    </div>

    <a href="###">这是基线</a>

  </body>

</html>

参考链接：http://www.cnblogs.com/yupeng/archive/2011/04/13/2014147.html

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

等；另两个链接找不到了~~！

　　　　　

css学习之 display:inline-block;的更多相关文章

  1. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  2. CSS学习摘要-盒子模型

    注:全文摘要自网络开发者网站,当然间隔也会整理一些思路和格式排版添加进去. CSS框模型(译者注:也被称为"盒模型")是网页布局的基础 --每个元素被表示为一个矩形的方框,框的内容 ...

  3. CSS——display（Block none inline等）属性的用法

    在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示 ...

  4. css学习--inline-block详解及dispaly:inline inline-block block 三者区别精要概括

    *知识储备: 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行. 块级元素:是可以控制宽和高.margin等,并且会换行. 1.inline-block 详解 (1)一句话就是在 ...

  5. [CSS3] CSS Display Property: Block, Inline-Block, and Inline

    Understanding the most common CSS display types of block, inline-block, and inline will allow you to ...

  6. CSS中的display属性（none,block,inline,inline-block,inherit）

    css中的display属性(none,block,inline,inline-block,inherit) display属性是我们在前端开发中常常使用的一个属性,其中,最常见的有: none bl ...

  7. CSS 基础 例子 display属性：block、inline和inline-block的区别

    HTML中块级元素(block)和行级元素(inline):比如div就是常见的块级元素,span就是常见的行级元素. 可以通过css的display属性来设置一个元素到底是块级,还是行级元素:dis ...

  8. 理解display:inline、block、inline-block

    要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...

  9. 大话css之display的Block未解之谜（一）

    用了几年的css了,css中inline | block |inline-block|table|flex从来没有做过系统的整理和分析,网上的分析文章也很多,零散. 今天有空,就在这做一下整理分析 b ...

随机推荐

  1. Step one : 熟悉Unix/Linux Shell 常见命令行 (二)

    2.学会使用一些文本操作命令 sed -- stream editor 1. Sed简介sed 是一种在线编辑器,它一次处理一行内容.处理时,把当前处理的行存储在临时缓冲区中,称为“模式空间”(pat ...

  2. .NET平台技术体系

    .NET平台技术体系梳理+初学者学习路径推荐+我们的愿景与目标 一 .NET平台技术体系梳理 .NET平台应用领域众多(桌面开发,web开发,移动开发),不断有新的编程爱好者开始学习或从其他平台转移到 ...

  3. POJ 1002 UVA 755 487--3279 电话排序 简单但不容易的水题

    题意:给你许多串字符串,从中提取电话号码,输出出现复数次的电话号码及次数. 以下是我艰难的AC历程:(这题估计是我刷的题目题解次数排前的了...) 题目不是很难理解,刚开始想到用map,但stl的ma ...

  4. ASP.NET MVC实现剪切板功能

    前言 关于复制粘贴的功能,好像不用劳师动众的写后端代码,JS就可以,但正如大家所知道的,兼容性问题,当然这么通用的功能怎么可能没有一个通用的方案呢,于是便找到了一款jquery插件 jquery.cl ...

  5. 回调函数 use

    $info["fulltext"] = preg_replace_callback( $search2, function($matches) use ($search, $uni ...

  6. IOS开发之路三（XML解析之GDataXML的使用）

    最近再做一个项目需要用到xml的解析.今天查了一些资料自己做了一个小demo.纯OC没有界面.. 在IOS平台上进行XML文档的解析有很多种方法,在SDK里面有自带的解析方法,但是大多情况下都倾向于用 ...

  7. WPF制作的小型笔记本

    WPF制作的小型笔记本-仿有道云笔记 楼主所在的公司不允许下载外部资源, 不允许私自安装应用程序, 平时记录东西都是用记事本,时间久了很难找到以前记的东西. 平时在家都用有道笔记, 因此就模仿着做了一 ...

  8. 构建RESTful风格的WCF服务

    构建RESTful风格的WCF服务 RESTful Wcf是一种基于Http协议的服务架构风格. 相较 WCF.WebService 使用 SOAP.WSDL.WS-* 而言,几乎所有的语言和网络平台 ...

  9. Drupal与大型网站架构（译）- Large-Scale Web Site Infrastructure and Drupal

    Drupal与大型网站架构(译)- Large-Scale Web Site Infrastructure and Drupal Linuxjournal 网站经典文章翻译,原文地址: Large-S ...

  10. 设计模式之 - 外观模式 （Facade design pattern）

    1. 模式意图:  为子系统中的一组接口提供一个一致的界面,Facade模式定义了一个高层接口,这个接口使得这一子系统更容易使用. 2. 结构 3. 工厂方法模式C#实现 using System; ...