3

このページに出くわしたとき、コンパスのオンラインリファレンスを調べていました: http://compass-style.org/reference/compass/utilities/general/hacks/

このページには、IE の has-layout ハックを実装する 2 つの方法があるようです。そのうちの 1 人が を設定しzoom: 1;、もう1 人が を設定display: inline-block;し、再び設定しdisplay: block;ます。

マニュアルで説明されていないのは、これら2つの違いは何ですか。

違いはありますか？どちらか一方を使用したい特定の状況はありますか?

4

1 に答える 1

3

最初の方法:

@mixin has-layout-block {
  @if $legacy-support-for-ie {
    // This makes ie6 get layout
    display: inline-block;
    // and this puts it back to block
    & {
      display: block; } } }

次のようにコンパイルされます。

selector {
    display: inline-block;
}
selector {
    display: block;
}

そして2番目の方法：

@mixin has-layout-zoom {
  @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
    *zoom: 1; } }

次のようにコンパイルされます。

selector {
    *zoom: 1;
}

どちらのメソッドも要素 hasLayout を正常に提供するため、純粋にその観点からは、どちらを使用しても問題ありません。

最初の方法は検証に合格しますが、2 番目の方法は合格しません。ただし、2 番目の方法で検証が失敗することはまったく問題ではありません。使用されるハックは「安全」です。

2 番目の方法の方が短く、2 つのルールを必要としないため、どこでも 2 番目の方法を使用します。

あまり心配する必要はありません (IE6/7 は死につつあります) が、さらに詳しい情報が必要な場合は、こちらとこちらをお読みください。

于 2012-12-19T15:34:29.823 に答える