3

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

在此页面上，似乎有 2 种方法可以为 IE 实现 has-layout hack。其中一个设置zoom: 1;其他设置display: inline-block;，然后将其重新设置回display: block;。

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

有什么区别吗？是否存在您更愿意使用其中一种的特殊情况？

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

第二种方法：

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

将编译为：

selector {
    *zoom: 1;
}

这两种方法都会成功地给出一个元素 hasLayout，所以纯粹从这个角度来看，你使用哪个并不重要。

第一种方法将通过验证，而第二种方法不会。但是，第二种方法中的验证失败是完全没有问题的；使用的黑客是“安全的”。

我到处使用第二种方法，因为它更短并且不涉及两个规则。

真的不值得担心（IE6/7 快要死了），但如果你想了解更多信息，请阅读this和this。

于 2012-12-19T15:34:29.823 回答