• 深入研究display:inlineblock在浏览器中的应用


    写在前面的话,在我开发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:}
     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>

     欢迎广大同学拍砖!!

  • 相关阅读:
    680. Valid Palindrome II【easy】
    125. Valid Palindrome【easy】
    459. Repeated Substring Pattern【easy】
    2. Trailing Zeros【easy】
    142. O(1) Check Power of 2【easy】
    181. Flip Bits【easy】
    183.Wood Cut【hard】
    61. Search for a Range【medium】
    关闭微软对win10的推送
    让未激活的win8.1不再跳出提示激活的窗口
  • 原文地址:https://www.cnblogs.com/yupeng/p/2014147.html
Copyright © 2020-2023  润新知