zoukankan      html  css  js  c++  java
  • inline-block总结

    众所周知,display属性经常用到了几个属性:inline,block,inline-block,下面先来各自回顾一下吧:

    display:inline也就是行内元素,是将元素排列成一行显示,span, a, label, input, img, strong, em等就是默认行内元素,然后行内元素不能改变高度,行高,底边距,而

    宽度也是自适应的,也是无法改变;

    dispaly:block则是块级元素,它默认在文本流中占一行,高度,行高,底边距都是可以改变的,宽度默认100%, h1~h6,ul li等就是块元素的例子。

    而display:inline-block则是综合了inline和block的一个属性,它默认是行内元素,但是可以改变宽高,然后不是所有的浏览器都兼容。目前FF,chrome,opera的问题

    都不大了,那么IE呢?

    微软MSDN开发者社区是这样说的:

    ——————————————————

    The inline-block value is supported starting with Internet Explorer 5.5. You can use this value to give an object a layout without specifying the object’s height or width.

    ——————————————————

    那么IE5.5以上都是支持的,不过要通过一点hack手段实现,这里涉及IE的haslayout只是,详情可参考这里

    #1 兼容ie的inline-block写法


    所以要想兼容inline-block,常用的做法是
    若是行内元素,则直接添加display:inline-block即可:

    .span{display:inline-block;}

    而如果是块级元素,如div首先要定义display:inline-block,然后再定义*display:inline,使其声明为行内元素,然后再加zoom:1激发haslayout:


    1.div{display:inline-block;*display:inline;*zoom:1;}
    效果和上面一样,大家可以试试。

  • 相关阅读:
    CF932E Team Work
    BZOJ 4480 [JSOI2013] 快乐的jyy
    CF285E Positions in Permutations
    P4312 [COCI 2009] OTOCI / 极地旅行社
    P3327 [SDOI2015]约数个数和
    P3649 [APIO2014]回文串
    P3181 [HAOI2016]找相同字符
    P3346 [ZJOI2015]诸神眷顾的幻想乡
    P4248 [AHOI2013]差异
    P4512 【模板】多项式除法
  • 原文地址:https://www.cnblogs.com/danielweb/p/4361221.html
Copyright © 2011-2022 走看看