hasLayout块与hasLayout缩放

Question

当我进入这个页面时，我正在浏览网上的指南针参考资料：http://compass-style.org/reference/compass/utilities/general/hacks/

在这个页面上，似乎有两种方法可以为IE实现has-layout hack。其中一个设置为zoom: 1;，另一个设置为display: inline-block;，然后再次将其设置回display: block;。

手册没有解释的是这两者之间的区别。

有什么不同吗？在某些特定的情况下，您会更喜欢使用其中之一吗？

Answer 1

第一种方法：

@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;
}

第二种方法：

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

将编译成类似如下的内容：

selector {
    *zoom: 1;
}

这两种方法都会成功地为元素提供hasLayout，因此从这个角度来看，使用哪种方法都无关紧要。

第一个方法将传递validation，而第二个方法不会。然而，第二种方法中的验证失败是完全没有问题的；所使用的黑客攻击是"safe"。

我在任何地方都使用第二种方法，因为它更短，而且不涉及两个规则。

这真的不值得担心(IE6/7正在消亡)，但如果你想了解更多信息，请阅读this和this。