IE Transparan PNG Sorunu

Bu sorun, daha öncedende web geliştiren hemen hemen herkesin başından geçmiştir. Geri kalmış Internet Explorer PNG dosyalarını (PNG nin özgür olması nedeniyle midir bilinmez) tam olarak desteklemiyor. Safari, Mozilla, Fireox gibi bir çok tarayıcı 24 bit transparan PNG dosyasını olduğu gibi gösterme yeteneğine sahipken, M$ Internet Explorer zemine grilik atıyor.

Elimizdeki resim 150 x 150 px ebadında, 24 bit transparan zemine sahip bir PNG dosyası olsun. CSS dosyamıza #field isminde bir id tanımlayalım ve kodumuzu yazalım;

#field {
  width:150px;
  height:150px;
  background: transparent url(image.png) !important; background: transparent;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true , sizingMethod=scale src='image.png');
}

Artık Internet Explorer de PNG dosyamızı transparan bir şekilde tanıycaktır. Ben bu şekilde sorun yaşamadım. Hala sorununuz devam ediyorsa aşağıdaki satırları da CSS dosyanıza eklemenizde fayda var.

* html #field a {
  position: relative; }
  *+html #field a {
  position: relative; }