IE6 Margin & Padding Sorunu ve Çözümü

En son, tema­daki iyi­leş­tir­me­leri yapar­ken IE6’da side­bar­daki tab menü­nüm sorun yarat­tı­ğını far­ket­tim. Bunun üzerine ufak bir araş­tırma yap­tım ve David Walsh Blog’da soru­nun neden kay­nak­lan­dı­ğını ve nasıl çözüle­ce­ğini anla­tan bir yazı bul­dum. Sonuç ola­rak sorunu çözdüm ve burada da anla­ta­yım dedim.

Bu sorunu hal­le­den ufak bir css kodu var. Aşa­ğı­daki örnek kodu ori­ji­nal yazı­dan aynen aldım ve kodda nor­malde hiç­bir prob­lem yok. Fakat IE6 için yeter­siz kalıyor:

#global-column-1{ margin:0 0 0 33px; padding:0 20px 0 0; width:255px; float:left; }
#global-column-2 { margin:0 0 30px 30px; width:250px; float:left; }

Yuka­rı­daki kod IE6 hariç hiç­bir tara­yı­cıda sorun çıkar­ma­ya­cak­tır, ancak IE6’da double margin/padding  ile ilgili bug olduğu için için kod çalışmayacaktır.

Aynı koda ufak bir ekleme yapa­rak bu sorunu düzeltebiliriz.

#global-column-1 { margin:0 0 0 33px; padding:0 20px 0 0; width:255px; float:left; } * html #global-column-1 { display:inline; }
#global-column-2 { margin:0 0 30px 30px; width:250px; float:left; }

Yuka­rıda yer alan display:inline; asıl sorunu düzel­ten kod­dur, * html #global-column-1 ifa­desi ise yal­nızca IE6 tara­fın­dan görün­tü­len­mek­te­dir. Yani bu ifa­deyi kul­lan­ma­sak da sorun çözülür.

Kay­nak: David Walsh Blog