css opacity IE9'daki düzen sorunlarına neden oluyor

IE9'da çok ilginç bir sorunla karşılaştım. Filtre: alfa (opacity =) veya sarma bloğundaki -ms-filter css özelliğini kullanırken, iç blok elemanlarının kutu modeli bozulur. Diğer bir deyişle, dikey marjın çökmesi devre dışı kalır ve bunun yerine dikey marj eklenir. Bu sorunla yalnızca IE9'da karşılaşıyorum. IE7/8 etkilenmez.css opacity IE9'daki düzen sorunlarına neden oluyor

İzole edilmiş sorunla birlikte bir jsFiddle. Sarma divasındaki filter: alpha içeren sınıfı etkinleştirmek için tetikleme tutturucusunu kullanın. (Sadece IE9)

Bunun neden olduğuyla ilgili herhangi bir fikrin var mı? peşin

yılında

Teşekkür

kaynak

2012-09-17 travisbotello

Herhangi bir filtre bunu yapar gibi görünüyor (http://jsfiddle.net/7BFd7/). Ancak, CSS özelliği "opaklık" IE9'da çalışır ve aksama neden olmaz. Yani, filtreyi sadece bir [[lt IE 9] 'yorum stilinde kullanmak etrafta bir iş olabilir. – Roman

Hızlı cevap için teşekkürler. Tüm projelerimde boilerplate kullandığım için bunu düşündüm. Ancak bu davranış gerçekten çok garip ... – travisbotello

@Roman Belki de bir cevap olarak bunu kabul etmek güzel olurdu, bu yüzden kabul edilebilir. – Shauna

Herhangi filtre bu (jsfiddle.net/7BFd7) yapmak gibi görünüyor.

Sadece bunu neden yaptığına dair bir hipotez yapabilirdim. Bir filtre kullanmak, unsuru, bilinmeyen bir görüntüyü veya kenar boşluğu çökmeyen konum kipini (konum mutlak, satır içi bloklar ve süzülmüş veya temizlenmiş öğeler gibi) kullanmak için ayarlar.

Yine de, bu öğeyi gizlemek istiyorsanız, opacity: 0 ile aynı etkiyi olan ve her yerde desteklenen visibility: hidden kullanabilirsiniz.

Opaklığı canlandırmak istiyorsanız, koşullu yorumlar veya Normalizr aracılığıyla tarayıcıyı koklamanız ve IE9'da opacity anüsünü gerçekleştirmeniz ve filtreyi daha eski IE sürümlerinde uygulamanız gerekir.

kaynak

2012-09-18 08:27:57 Roman

bir yolu "kurulmamış" sadece CSS ile IE9 dosyalayıcı IE8 içinde uygulamak için izin iken ve alt aşağıdaki sadece IE9 hedef alacağını kod şudur:, sen olacak Bu şekilde

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

Daha sonra sadece opaklık: değeri kullanın ve IE9'da bu öğeye filtre uygulamayın.

kaynak

2014-04-01 23:14:40 squareman

css opacity IE9'daki düzen sorunlarına neden oluyor

cevap

İlgili konular