zoukankan      html  css  js  c++  java
  • html中inlineblock出现缝隙间距的解决方案

    不同浏览器之间的间隔距离是不一样的,亲测有下面4中情况

    浏览器缝隙大小(PX)备注
    Firefox4 
    Chrome5
    IE4
    qq,360,搜狗等浏览器8 

    html显示:

    出现这个问题的原因就是:

    1.代码部分标签之间出现空格

    像这样:

    <div>
        <a href=""></a><!-- 这些都是缝隙 -->
        <a href=""></a><!-- 这些都是缝隙 -->
        <a href=""></a><!-- 这些都是缝隙 -->
        <a href=""></a><!-- 这些都是缝隙 -->
    </div>

    2.使用自动化工程化开发最后都需要压缩html代码,这样子的话不会出现这个问题,也就是压缩后

    像这样:

    <div><a href></a><a href></a><a href></a><a href></a></div>这样就不会出现间隔

    html显示:

    inline-block出现的这种情况其实不需要太过于注重每个浏览器怎么表现,而是她的解决方案:

    ************************************************************************************************************

    1.通过设置font-size值:

    div{
        font-size: 0;
    }
    div>a{
        display: inline-block;
        font-size: 14px;
        *margin-left:-1px;/*IE6,7下兼容*/
        300px;
        height: 80px;
        background: #188eee;
    }

    2. 代码部分直接把a标签之间的空格删除,简单暴力,

    <div><a href></a><a href></a><a href></a><a href></a></div>这样就不会出现间隔

    备注:因为不同浏览器的间距不同,使用margin-left:-4px;在不同浏览器下显示结果也不一样,上述的两种解决方案能够兼容所有情况!

  • 相关阅读:
    Java中的事务
    ABCDE
    Android 防内存泄露handler
    自建应用新花样,菜鸟也会做应用
    软件測试之独步武林系列(一)
    刚在在win8.1下装了ubuntu12.04
    SVN 的一些操作
    [华为机试练习题]42.求二叉树的深度和宽度
    iOS_正則表達式
    在应用中更新App版本号
  • 原文地址:https://www.cnblogs.com/zj1024/p/8831154.html
Copyright © 2011-2022 走看看