【问题标题】:Susy Compass omega is adding #margin-left: -1em;Susy Compass omega 正在添加 #margin-left: -1em;
【发布时间】:2013-04-09 12:32:53
【问题描述】:

我正在使用 Susy 框架为我的网站创建一个网格,我非常喜欢它。 我无法弄清楚为什么在跨度列中使用 omega 时会添加 #margin-left: -1em 。 我似乎找不到任何关于它的信息,当我验证 css 时它会抛出这个错误: .second Parse Error #margin-left: -1em;

我的代码如下所示

//this is the default number of columns
$total-columns: 12; 
//width of each column
$column-width   : 4em; 
//space between columns
$gutter-width   : 1em; 
//space on the right and left of the grid
$grid-padding   : $gutter-width;

.first{
    @include span-columns(6,12);
}
.second{
    @include span-columns(6 omega,12);
}

并生成这个

.first {
   width: 49.15254%;
   float: left;
   margin-right: 1.69492%;
   display: inline;
}

.second {
   width: 49.15254%;
   float: right;
   margin-right: 0;
   #margin-left: -1em;
   display: inline;
 }

【问题讨论】:

    标签: css sass compass-sass susy-compass


    【解决方案1】:

    您的代码使用 Compass 对我来说编译得很好。有问题的行有一个星号,而不是一个井号:

    *margin-left: -1em;
    

    以星号开头的 CSS 行是仅适用于 IE

    要禁用 IE 6-7 支持,请在导入 Susy 之前将 $legacy-support-for-ie 设置为 false:

    $legacy-support-for-ie: false;
    @import "susy";
    

    【讨论】:

    • 感谢您的回复。这很奇怪,不知道为什么地雷编译成 # 而不是 *。如果需要,我将禁用对 IE 6-7 的支持并手动重新添加代码。
    • 它在最新版本中从# 更改为*。见this commit。 IE 在达到亚像素数学时会四舍五入,因此除非您给它们额外的呼吸空间,否则布局可能会中断。 -1em 给了他们那个空间,因为omega 元素是向右浮动的,所以大多数人甚至都没有注意到。您可以使用 Compass browser support 设置关闭任何黑客攻击:$legacy-support-for-ie6$legacy-support-for-ie7,或更通用的 $legacy-support-for-ie
    • 非常感谢您的帮助和解释。我已经升级到最新版本的 Susy,它现在显示 *。
    猜你喜欢
    • 2013-07-15
    • 1970-01-01
    • 2011-09-19
    • 1970-01-01
    • 2013-11-04
    • 1970-01-01
    • 2014-05-16
    • 1970-01-01
    • 2012-10-26
    相关资源
    最近更新 更多