Блок hasLayout против hasLayout Zoom

Question

Когда я наткнулся на эту страницу, я просматривал онлайн-справку по компасу: http://compass-style.org/reference/compass/utilities/general/hacks/

На этой странице, как представляется, есть 2 способа для реализации взлома has-layout для 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 умирают), но если вы хотите больше информации, прочитайте это и это.