hasLayout Block vs. hasLayout Zoom [英] hasLayout Block vs. hasLayout Zoom

问题描述

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

在此页面上， 2方法来实现一个has-layout hack为IE。其中一个设置 zoom：1; 其他设置 display：inline-block; display：block;

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

有什么区别吗？

解决方案

第一种方法：

  @mixin has-layout-block {
 @if $ legacy-support-for-ie {
 //这使得ie6 get布局
 display：inline-block; 
 //这将它放回块
& {
 display：block; }}} 
  

将编译为：

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

第二种方法：

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

将编译成如下形式：

< pre class =lang-css prettyprint-override> selector {
* zoom：1;
}


两个方法都将成功赋予一个元素hasLayout，所以纯粹从这个角度来看

第一种方法将传递验证，而第二种方法不会。然而，第二种方法中的验证失败是完全非问题;使用的黑客是安全。

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

这不是真的值得担心（IE6 / 7正在死）但如果您需要更多信息，请阅读此和此。

I've been going through the online reference of compass when I ran into this page: http://compass-style.org/reference/compass/utilities/general/hacks/

On this page, there apear to be 2 methods to implement a has-layout hack for IE. One of them sets zoom: 1; The other sets display: inline-block;, and then sets it back to display: block; again.

What the manual doesn't explain is what's the difference between these two.

Is there any difference? Are there particular situations where you would prefer to use one or the other?

解决方案

The first method:

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

will compile to something like:

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

And the second method:

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

will compile to something like:

selector {
    *zoom: 1;
}

Both methods will successfully give an element hasLayout, so purely from that perspective it doesn't matter which you use.

The first method will pass validation, whereas the second method will not. However, the validation failing in the second method is a complete non-issue; the hack used is "safe".

I use the second method everywhere because it's shorter and doesn't involve two rules.

It's not really worth worrying about (IE6/7 are dying), but if you want more information read this and this.

这篇关于hasLayout Block vs. hasLayout Zoom的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！