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;在不同浏览器下显示结果也不一样,上述的两种解决方案能够兼容所有情况!

  • 相关阅读:
    2017 Multi-University Training Contest
    NTT模板
    重庆OI2017 小 Q 的棋盘
    用TensorFlow2.0构建分类模型对数据集fashion_mnist进行分类
    读取keras中的fashion_mnist数据集并查看
    基本类型和引用类型
    idea快捷键
    pytorch的torch.nn.CrossEntropyLoss()
    高斯模糊和高斯双边滤波
    opencv之模糊操作
  • 原文地址:https://www.cnblogs.com/zj1024/p/8831154.html
Copyright © 2011-2022 走看看