zoukankan      html  css  js  c++  java
  • 去除 inlineblock 空隙终极解决方案

    上代码:

    dib-wrap {
        font-size:0;/* 所有浏览器 */
        *word-spacing:-1px;/* IE6、7 */
    }
    .dib-wrap .dib{
        font-size: 12px;
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align:top;
    }
    @media screen and (-webkit-min-device-pixel-ratio:0){
    /* firefox 中 letter-spacing 会导致脱离普通流的元素水平位移 */
         .dib-wrap{
                letter-spacing:-5px;/* Safari 等不支持字体大小为 0 的浏览器, N 根据父级字体调节*/
        }
    }
    .dib {
        display: inline-block;
        *display:inline;
        *zoom:1;
    }

    其实在 YUI 3 中也全面运用了 inline-block 作为基础布局,YUI 3 是这样解决的:

    .yui3-g {
    letter-spacing: -0.31em; /* webkit: collapse white-space between units */
    *letter-spacing: normal; /* reset IE < 8 */
    word-spacing: -0.43em; /* IE < 8 && gecko: collapse white-space between units */
    }
    
    .yui3-u {
    display: inline-block;
    zoom: 1; *display: inline; /* IE < 8: fake inline-block */
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    }

    显然,这里纯粹使用了 letter-spacing 和 word-spacing 来控制元素间的空隙,局限性极大,-0.31em 和 -0.43em 只是因为 YUI 3 全局 cssfonts.css 里设置是:「body { font:13px/1.231 arial,helvetica,clean,sans-serif; }」。

  • 相关阅读:
    Java 单测 回滚
    Java四种线程池的使用
    git gc
    Git 常用命令
    JPA 批量新增
    SpringData JPA 排除 扫描 exclude-filter 不能使用解决
    开源许可证GPL、BSD、MIT、Mozilla、Apache和LGPL的区别
    深入浅出 RPC
    阿里 Java面试 知识点
    Eclipse Egit 安装
  • 原文地址:https://www.cnblogs.com/cuoreqzt/p/2965924.html
Copyright © 2011-2022 走看看