hasLayout Block vs. hasLayout Zoom

Question

当我遇到这个页面时，我一直在浏览指南针的在线参考：http://compass-style.org/reference/compass/utilities/general/hacks/

在此页面上，有 2 种方法可以实现 IE 的布局黑客。其中一个设置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，因此纯粹从这个角度来看，您使用哪个并不重要。

第一种方法将通过验证，而第二种方法则不会。但是，第二种方法中的验证失败完全不是问题;使用的黑客是"安全的"。

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

这真的不值得担心（IE6/7正在消亡），但是如果您想了解更多信息，请阅读此和该。