css - hasLayout block 与 hasLayout 缩放

Question

当我遇到这个页面时，我一直在浏览 compass 的在线引用: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，因此纯粹从这个 Angular 来看，您使用哪种并不重要。

第一个方法会通过 validation ，而第二种方法不会。但是，第二种方法验证失败完全不是问题；使用的 hack 是 "safe" .

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

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