网上查到资料是给元素设定display:inline-block，再触发layout，设定display:inline;因为所有的浏览器都支持inlie。

即: div{display:inline-block;}  div{display:inline;}
 
原理在下面：

写在前面的话，在我开发CSS的过程中，我发现很多诡异的问题都是对概念理解有偏差，所以在每篇开始的时候，我都把W3c的解释拿出来晒晒。个人经验，很多的问题看看W3C一般都能够解决，W3C是最好的参考书。

官方解释：将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。

按照这个解释：支持的浏览器有（ie8,ie9,chrome,firefox3.6+,由于我是用firefox3.6测试的） ，ie6，ie7 是不支持这个属性的。

ie6,7 如何支持这个属性呢？

对于块级元素，直接让块级元素成行内元素， 然后再触发layout。 {display：inline;zoom:1}，可能有的同学会说，怎么说ie6,7不支持这个元素呢？

我不是经常在ie6,7的a标签、span 下使用这个属性吗？也起到了作用，这里理解可能有一个误区，使用display：inline-block是触发了layout的原因。

另外一种方式就是先触发块级元素的layout 属性，然后再让他成内联元素来展现。比如p元素,可以这样写 p{display:inline-block}p{display:inline}

display：inline-block可以用来做什么？

可以做的事情很多，可以写顶部的菜单，可以图文混排，可以内嵌block元素，也可以至如inline元素中，可以做信息卡片，如百度空间搭讪有缘人的卡片有缘人纪念日的固定宽度的书写，当然也可以做布局。 万变不离其宗，我觉得最本质的就是利用它的使元素为内联对象，但是内容做块状呈递。这点我们应该牢记。只要理解了它的本质东西，我们才可以以不变应万变，甚至可以创造自己的东西。

使用它要注意什么呢？

在使用了display：inline-block的元素之间有换行符，空格间隙问题。

1.块状元素被设置了display：inline-block后，ie6,7没有空格问题。其他浏览器都有。如下图所示：

在ie8，ie9，firefox可以通过使用font-size:0来解决，但是chrome很悲剧。还是有空白，我使用的是chrome10。不能清除。 可以通过添加letter-spacing属性

的值来解决，建议作者通过尝试来解决这个问题。我设置的值是-8px刚才好清除空白。我担心这会不会有相互覆盖问题。后来我将值调大到-28px，果然，在chrome中有覆盖，但是在其他的浏览器中没有。可见解决这个问题以chrome为主。

2.内联元素被设置了display：inline-block后，所有的浏览器都有换行，空白间隙问题。

如下图所示：

 所有浏览器，ie6,7,8,9 chrome，firefox都有空白，

怎么解决呢。直接在包含的元素上添加letter-spacing:-8px; 即可。

最后附上我研究的代码：

1 <!DOCTYPE HTML>

 2 <html >

 3 <head>

 4     <meta http-equiv="Content-Type" content="text/html;charset=gb2312" />

 5     <style type="text/css">

 6 * { margin:0; padding:0 }

 7 #doc { width:990px; margin:0 auto; margin-top:50px;font:12px/1.5 arial; }

 8 #doc h4 { border-bottom:1px solid #000; margin:10px 0px; }

 9 dib{display:inline-block}

10 div{display:inline-block;}

11 div{display:inline;}

12 ul{letter-spacing:-8px;}

13 ul li{display:inline;zoom:1;}

14     </style>

15     <title></title>

16 </head>

17 <body>

18     <div id="doc">

19     <h4>display:inline-block的研究</h4>

20     <div class="dib">测试这个属性的支持情况1</div>

21     <div class="dib">测试这个属性的支持情况2</div>

22     </div>

23     <ul >

24     <li><img src="dj.jpg"/></li>

25     <li><img src="dj.jpg"/></li>

26     </ul>

27     <div style="letter-spacing:-8px;">

28     <img src="dj.jpg"/>

29     <img src="dj.jpg"/>

30     <img src="dj.jpg"/>

31     </div>

32 </body>

33 </html>

　　

 
 

IE6、7下inline-block不起作用的更多相关文章

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

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

  2. IE6 7下常见CSS兼容性处理

    以下是一些比较常见的IE6 7下的兼容性问题. 在当下这个时代,其实我们几乎可以不用再去针对IE6做兼容性的处理,除非你的公司还是诡异的要求你兼容到IE6.但是了解一些常见的兼容性问题还是可以帮助我们 ...

  3. IE6/IE7下：inline-block解决方案

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

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

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

  5. IE6条件下的bug与常见的bug及其解决方法

    1.IE6条件下有双倍的margin 解决办法:给这个浮动元素增加display:inline属性 2. 图片底部有3像素问题 解决办法:display:block;或者vertical-align: ...

  6. IE6/IE7下：inline-block不兼容的问题

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

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

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

  8. inline,block,inline-block的区别

    display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...

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

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

  10. inline, block, and inline-block

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

随机推荐

  1. Android应用程序与SurfaceFlinger服务的关系概述和学习计划

    文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/7846923 SurfaceFlinger服务负 ...

  2. 【贪心】【POJ3154】墓地雕塑（Graveyard, NEERC 2006, LA 3708）需要稍稍加工的（先贪心，再确保能这样贪（可行性&&如果可行必定最优&&非证明最优性）的题）（K）

    例题4  墓地雕塑(Graveyard, NEERC 2006, LA 3708) 在一个周长为10000的圆上等距分布着n个雕塑.现在又有m个新雕塑加入(位置可以随意放),希望所有n+m个雕塑在圆周 ...

  3. HEVC测试序列（百度云网盘分享）

    巧妇难为无米之炊,身为一个码农怎能碗里没有米呢?想必很多朋友都碰到下载测试序列的困惑,为了减少麻烦,现提供HEVC所有测试序列的下载,上传到百度云网盘上,方便大家下载.主要的测试序列如下: Test ...

  4. android stagefright基本流程总结

    数据流的封装一. 由数据源DataSource生成MediaExtractor. 通过MediaExtractor::Create(dataSource)来实现.Create方法通过两步来生成相应的M ...

  5. SQL Server 强行Insert包含自增列值的记录

    SET IDENTITY_INSERT 表 ON INSERT INTO 表 ([ID] ,[SequenceNumber] ,[EnumCode] ,[Description]) VALUES ( ...

  6. 在linq查询环境下通过sql语句来访问数据库

    接上一篇随笔 这里主要介绍在linq环境下,如果实现用sql来访问数据库,同时也介绍在EF框架中如何添加新的方法来访问数据库. 1.首先,在数据访问层(EF.DAO,EF.IDAO)中添加具体的函数来 ...

  7. MVC 授权过滤器 AuthorizeAttribute

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...

  8. C++中把string转成char

    c_str函数的返回值是const char*的,不能直接赋值给char*, c++语言提供了两种字符串实现,其中较原始的一种只是字符串的c语言实现. 与C语言的其他部分一样,它在c+的所有实现中可用 ...

  9. C++中如何split字符串（转）

    #include <iostream> #include <sstream> #include <string> using namespace std; int ...

  10. 实现一个宽和高都是100像素的div可以用鼠标拖拽移动的效果

    html,body{ width:100%;height:100%;margin:0px;padding:0px; } #box{ width:100px;height:100px;backgroun ...