css непрозрачность, вызывающая проблемы с размещением в IE9

Я столкнулся с очень интересной проблемой в IE9. При использовании свойства filter: alpha (opacity =) или -ms-filter css на обертке div модель блока внутренних блоков становится поврежденной. Другими словами, сбой вертикальной границы становится отключенным, а вместо него добавляется вертикальная маржа. Я столкнулся с этой проблемой только в IE9. IE7/8 не влияет.css непрозрачность, вызывающая проблемы с размещением в IE9

Вот jsFiddle с изолированной проблемой. Используйте триггерный якорь для активации класса, который включает фильтр: alpha на обертке div. (Только для IE9)

Любые идеи, почему это происходит?

Заранее спасибо

источник

2012-09-17 travisbotello

Любой фильтр, похоже, делает это (http://jsfiddle.net/7BFd7/). Но свойство CSS 'opacity' работает в IE9 и не вызывает глюка. Таким образом, использование фильтра только в стиле '[if lt IE 9' 'commented может работать. – Roman

Спасибо за быстрый ответ. Я уже думал об этом, так как я использую шаблон во всех своих проектах. Однако это поведение действительно очень странно ... – travisbotello

@ Roman Возможно, было бы хорошо опубликовать это как ответ, чтобы его можно было принять. – Shauna

Любой фильтр, кажется, делает это (jsfiddle.net/7BFd7).

Я мог только предположить, почему он это делает. Похоже, что использование фильтра позволяет элементу использовать какой-либо неизвестный режим отображения или позиции, который не выполняет крах разметки (например, абсолютное положение, встроенные блоки и плавающие или очищенные элементы).

В любом случае .. Если вы просто хотите скрыть этот элемент, вы можете использовать visibility: hidden, который имеет тот же эффект, что и opacity: 0, и поддерживается везде.

Если вы хотите анимировать непрозрачность, вам нужно будет обследовать браузер с помощью условных комментариев или Normalizr и анимировать opacity в IE9 и применить фильтр в старых версиях IE.

источник

2012-09-18 08:27:57 Roman

Один из способов «снята с охраны» файлера в IE9 только с помощью CSS, позволяя его применять в IE8 и ниже, является следующий код, который будет только предназначаться IE9:

.css-selector { 
    filter:value; 
    opacity:value; 
} 
@media all and (min-width:0) { /* the min-width query hides below IE9 */ 
    .css-selector { 
     filter:none; 
    } 
}

Таким образом, вы будете то используйте только opacity: value, а не фильтр для этого элемента в IE9.

источник

2014-04-01 23:14:40 squareman

css непрозрачность, вызывающая проблемы с размещением в IE9

ответ

Смежные вопросы