3

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?

thirtydot
  • 224,678
  • 48
  • 389
  • 349
Ruben Vreeken
  • 956
  • 1
  • 13
  • 22

1 Answers1

3

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.

thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • Allright, thanx. Yea I realize both IE6 and IE7 are dying, but there are still cases where I have to support IE7, so I try my best to keep my knowledge as complete as I possibly can, at least until I officially stop supporting IE7 on any site. – Ruben Vreeken Dec 20 '12 at 13:30