代码间距的由来和解决方法

标签：

先来个简约版的，抛弃了那些老古董之后

抛弃ie6-7,ie8(Q),safari 5.x，先用font-size:0;清除掉间距，再给子元素恢复字体大小，并且恢复默认间距vertical-align:top;不是必须的

.yui-g {

　　font-size:0;

}
.yui-u {

　　display: inline-block;
　　font-size: 12px;

      letter-spacing: normal;
　　vertical-align:top;

}

基于yui3的改版，抛弃了ie6~7

.yui3-g {
    letter-spacing: -0.31em; 
    word-spacing: -0.43em; 
}
.yui3-u {
    display: inline-block;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
}

YUI3 原版 兼顾了ie6~8以及safari

YUI 3.5.1 (build 22)

.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;
}

飘准解析，block和inline元素，设置样式为display：inline-block之后兄弟元素间会有一定量的代码间距，默认大约3~6px之间

默认为inline的元素也是会有这个代码间距的，最简单粗暴的解决方法：ugly.js这样的代码压缩插件。

由来：space,tab,form feed, return feed等等各种折行空格会产生代码间距，这个间距的大小由该元素继承到的font-size大小计算而来，一般是为父元素基础字体宽的一般，比如body { font-size: 12px;} 那么这个间距有可能就是5px或者4px等等，不同的浏览器解析会有所不同

HTML 中的换行符、空格符、制表符等产生了空白符，而这些归根结底都是字符，那么它们的大小都是 受 font-size 来控制的，字体大小直接导致 inline 或者 inline-block 后元素之间空隙的大小，把 inline-block 元素间的空隙认为总是某个固定大小是错误的。

方法：设置父元素font-size: 0;整个世界都清净了，然后给子元素恢复字体大小就好了，然而safari 5.0 ago 这是什么鬼，我不懂，所以还得为其加上一句 letter-space: -5px;

使用 font-size:0经测试发现，.dib-wrap {
font-size:0;/* 所有浏览器 */
*word-spacing:-1px;/* IE6、7 */
}
.dib-wrap .dib{
font-size: 12px;
letter-spacing: normal;
word-spacing: normal;/*for ie 6-7  1px*/
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;  /*for ie 6-7 or ie8(Q)  */
*zoom:1; /*for ie 6-7 or ie8(Q) */
}

淘宝原版

@media screen and (-webkit-min-device-pixel-ratio:0){
/* firefox 中 letter-spacing 会导致脱离普通流的元素水平位移 */
.dib-wrap{
letter-spacing:-5px;/* Safari 等不支持字体大小为 0 的浏览器, N 根据父级字体调节*/
}
}

可以缩写为

[;letter-spacing:-5px;]合并么？
.dib-wrap {
font-size:0;/* 所有浏览器 */

[;letter-spacing:-5px;]
*word-spacing:-1px;/* IE6、7 */
}

 参考来源http://ued.taobao.org/blog/2012/08/inline-block/#comment-246109

代码间距的由来和解决方法

标签：

原文地址：http://www.cnblogs.com/Aladingding/p/5125166.html