compass核心模块utilitiesGenralfloatmixin的使用

"double-margin bug in IE5/6"

是浮动领域一个经典的bug.

This module provides mixins that help you work around the double-margin bug in IE5/6.

This file can be imported using: &＃64;import "compass/utilities/general/float"

在IE6下子元素相对于父元素float时&＃xff0c;挨着父容器的子元素&＃xff0c;如果有margin值&＃xff0c;那么渲染之后的值会被double。

.sun{float:left;margin-left:100px;
}
//渲染之后该margin-left的值会被拉到200px&＃xff1b;

fix的方法&＃xff1a;

给这个float的子元素增加inline属性&＃xff0c;W3C的规范定义float的元素会自动变为block元素&＃xff0c;不管你的display值是什么。

所以加了这个inline并不会改变这个子元素的display特性&＃xff0c;却可以神奇的解决IE6bug&＃xff0c;所以要兼容IE6&＃xff0c;float布局需要写成如下&＃xff1a;

.sun{float:left;display:inline;
}

Compass针对这个问题&＃xff0c;也封装了自己的mixin来解决这一bug。

compass把CSS分为了两类&＃xff1a;

&＃xff08;1&＃xff09;border-radius,box-shadow,这类的CSS属性&＃xff0c;如果不兼容&＃xff0c;只会影响布局的样式美观程度&＃xff0c;不会造成布局排版混乱&＃xff1b;

对应browser support中的这个变量设置&＃xff0c;默认值是0.1

$graceful-usage-threshold 0.1

&＃xff08;2&＃xff09;box-sizing;这类的CSS如果浏览器不兼容的话&＃xff0c;会造成页面布局的混乱&＃xff0c;

$critical-usage-threshold 0.01

意思是&＃xff1a;如果我们支持的浏览器&＃xff0c;在某个特定版本情况下&＃xff0c;第二种CSS 属性的使用率达到了万分之一&＃xff0c;那么在compass输出时该样式属性就应该考虑兼容这个浏览器版本。

以上两种属性对应browser Support中两种配置。

示例&＃xff1a;

在 screen.scss文件中写下列样式&＃xff1a;

.pull-left{&＃64;include float(left);
}//编译出来的结果
/* line 130, ../sass/screen.scss */
.pull-left {float: left;
}


很明显float是属于第二类属性的&＃xff0c;那么第二类属性在IE6上的使用率如何呢?可以通过&＃64;debug omitted-usage("ie","6");来看其使用率。此时是没有dispaly&＃xff1a;inline&＃xff1b;这句代码的&＃xff0c;原因如下&＃xff1a;

使用&＃64;debug omitted-usage("ie","6")可以在编辑器中显示使用率为0.0093<0.01&＃xff0c;所以此时compass输出时不会考虑第二类CSS属性对浏览器的支持&＃xff0c;自然就不会编译出display&＃xff1a;inline这样的hack.

可以使用$browser-minimum-versions:("ie","6");来设置IE支持的最小版本&＃xff0c;这时compass就不会根据属性使用率去判断IE6是否需要兼容支持了&＃xff0c;而是根据浏览器的最低兼容版本去处理了。

设置了IE要支持IE6版本后&＃xff0c;不在根据使用率而是有设置的版本号进行决定要不要进行相关兼容操作。

具体官方文档http://compass-style.org/reference/compass/utilities/general/float/