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) にまたがる場合、ミックスインを使用する必要はまったくありません。これは、すべてのブロック html 要素 (nav、article など) がデフォルトで行うことだからです。したがって、あなたの場合、nav/article コードを完全に削除できます (ただし、nav の clearfix が必要な場合があります)。

$legacy-support-for-ie6その他の質問は、Internet Explorer のレガシー サポート ハックに関するもので、コンパス設定とを使用してオンとオフを切り替えることができます$legacy-support-for-ie7。

  1. 柔軟なレイアウトにより、ブラウザは時折サブピクセルの丸めを強制されます。IE6 と 7 ではその丸めに問題があり、レイアウトが崩れることがあるため、これらのブラウザー用に負のマージンを隠して余分なスペースを確保しています: #margin-left: -1em;. これ#は、IE6 と IE7 だけが見抜くことができるハックです。

  2. display: inline;フローティング要素には影響しません。そのため、幅やその他のブロック スタイルを引き続き適用できます。しかし IE6 では、float を設定しinlineて二重マージンのバグを修正します。

于 2012-11-16T17:59:45.623 に答える