码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-01-12 18:04:22      阅读:236      评论:0      收藏:0      [点我收藏+]

标签:

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

抛弃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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!