zoukankan      html  css  js  c++  java
  • display:inline-block 间隙

    IE6/7是不支持display:inline-block属性,只是让其表现的跟inline-block一样,尤其对于inline水平的元素,其表现度可以用perfect一词来形容了。

    对于IE8+以及现代浏览器,直接使用:{display:inline-block;}就可以了,支持任意水平的元素。

    对于不支持的IE6/7浏览器该怎么办呢?

    如果是inline水平的元素(如a标签,span标签之类)跟上面一样,直接:{display:inline-block;}就可以了,对于这两个浏览器,其功效与*zoom:1;是一样的。

    如果是block水平的元素,例如li标签。则需要多点代码,目前我知道的方法有两个,如下所示:li {display:inline-block;*display:inline;*zoom:1}

    display:inline-block布局的元素在chrome下会出现几像素的间隙,原因是因为我们在编辑器里写代码的时候,同级别的标签不写在同一行以保持代码的整齐可读性,即inline-block布局的元素在编辑器里不在同一行,即存在换行符,因此这就是著名的inline-block“换行符/空格间隙问题”。如果inline-block元素间有空格或是换行产生了间隙,那是正常的,应该的。如果没有空格与间隙才是不正常的(IE6/7 block水平元素)。

    为了避免出现间隙,提供以下几种解决办法,这几种方法灵活运用:

    代码实例:

    li{display:inline-block;}

    <ul>

      <li>

        <span>...</span>

      </li>

      <li>

        <span>...</span>

      </li>

    </ul>

    1.给 li 写font-size:0

    2.把li标签写到一行,不要在编辑器里敲回车换行,但是这种写法对于标签很多的情况可读性太差,适用与例如<a></a><a></a>这样简单的结构

    3.把li的标签改成这样的写法

    <li>
        <span>...</span>
    </li><li>
        <span>...</span>
    </li>


    如果想深度了解display:inline-block 推荐阅读:http://www.zhangxinxu.com/wordpress/?p=1194
  • 相关阅读:
    C/C++ 语言中的表达式求值
    C++中delete与delete[]
    特殊数据类型成员变量的初始化
    C++中的new
    C++数组名解析
    C++中的位拷贝和值拷贝
    while(cin>>s)退出问题
    C++继承中的虚析构函数
    C++的IO标准库介绍
    C++一道面试题(atexit)
  • 原文地址:https://www.cnblogs.com/mabelstyle/p/3849325.html
Copyright © 2011-2022 走看看