2

我已经用 Susy 配置了我的第一个指南针项目。

在我的screen.scss，我有以下代码：

// container([$<media-layout>]*)
.page { @include container; 
        @include susy-grid-background; //use it for background-image to see width all columns 
}

// span-columns(<$columns> [<omega> , <$context>, <$padding>, <$from>])
nav { @include span-columns(5,5); //span 5 from 5 columns
    li{float:left;padding:0 1em 0 0;}
}
article { @include span-columns(5 omega,5); //span 5 from 5 columns , <omega>: Optional flag to signal the last element in a row.
}

输出screen.css结果为：

nav {
  width: 100%;
  float: left;
  margin-right: 4.16667%;
  display: inline;
}
/* line 24, ../sass/screen.scss */
nav li {
  float: left;
  padding: 0 1em 0 0;
}

/* line 26, ../sass/screen.scss */
article {
  width: 100%;
  float: right;
  margin-right: 0;
  #margin-left: -1em;
  display: inline;
}

问题1：在文章块中省略omega属性时screen.scss，我没有这个' #margin-left: -1em;'。这是什么意思？

问题2：所有元素都设置了一个width属性。由于所有块都内联显示，因此此处是否允许这样做？

4

1 回答 1

0

当您跨越网格的整个宽度 (5/5) 时，您根本不需要使用任何 mixin - 因为这是所有块 html 元素（导航、文章等）默认执行的操作。因此，在您的情况下，您可以完全删除导航/文章代码（尽管您可能需要导航的 clearfix）。

您的其他问题与 Internet Explorer 旧版支持黑客有关，您可以使用 Compass 设置$legacy-support-for-ie6和$legacy-support-for-ie7.

  1. 灵活的布局迫使浏览器偶尔进行亚像素舍入。IE6 和 7 在这种舍入方面存在问题，有时它们会破坏布局，因此我们为那些带有隐藏负边距的浏览器腾出额外空间：#margin-left: -1em;. 这#是一个只有 IE6 和 IE7 才能看穿的 hack。

  2. display: inline;对浮动元素没有影响，这就是为什么我们仍然可以应用宽度和其他块样式。但是在 IE6 中，设置一个浮点数来inline修复双倍边距错误。

于 2012-11-16T17:59:45.623 回答