成长小破站

display:inline-block空隙解决方法及原因

  • letter-spacing
  • word-spacing
  • 吸星大法 现成的解决方案
  • <!--方法①-->
    .yui3-g {
        letter-spacing: -0.31em; /* webkit */
        *letter-spacing: normal; /* IE < 8 重置 */
        word-spacing: -0.43em; /* IE < 8 && gecko */
    }
    
    .yui3-u {
        display: inline-block;
        zoom: 1; *display: inline; /* IE < 8: 伪造 inline-block */
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
    }
    <!--方法②-->
    li {
        display:inline-block;
        background: orange;
        padding:10px;
        word-spacing:0;
        }
    ul {
        width:100%;
        display:table;  /* 调教webkit*/
        word-spacing:-1em;
    }
    
    .nav li { *display:inline;}
    -->

    display:inline-block空隙解决方法及原因
    同学在做菜单的时候可能会用ul>li>a来实现横向的菜单;但在做的时候发现菜单与菜单直接有空隙;个人感觉应该是spacing之类的东西引起的根本原因。
    解决方案有以下几种:
    可以访问张鑫旭的空间看分析,这里不再赘述;
    穿越门:点我穿越

    解决方案

    1. 标签不闭合法 不推荐
    2. 字体变0法 还行
    3. margin负值法
    4. “整体化一”法,将源代码压缩至一行
    5. 代码注释法插入
    6. letter-spacing
    7. word-spacing
    8. 吸星大法 现成的解决方案
    <!--方法①-->
    .yui3-g {
        letter-spacing: -0.31em; /* webkit */
        *letter-spacing: normal; /* IE < 8 重置 */
        word-spacing: -0.43em; /* IE < 8 && gecko */
    }
    
    .yui3-u {
        display: inline-block;
        zoom: 1; *display: inline; /* IE < 8: 伪造 inline-block */
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
    }
    <!--方法②-->
    li {
        display:inline-block;
        background: orange;
        padding:10px;
        word-spacing:0;
        }
    ul {
        width:100%;
        display:table;  /* 调教webkit*/
        word-spacing:-1em;
    }
    
    .nav li { *display:inline;}
    来都来了,留个言吧🙂