Една градинка повече, чист въздух за всички.

И след интересната кампания на RipIE6, описание на някой от по явните проблеми при IE6:

1. PNG и IE6 и IE7

Основният проблем тук е че младежите от Microsoft са решили да не се дават и да се опълчват при налагането на един от най добрите image формати.

PNG или казано Portable Network Graphics е формат създаден да подобри и замени GIF формата… но за съжаление отпора не е малък.
Предимствата на самия формат са в това че качеството на графиката е много добро, цветовата гама е пълна и поддържа полупрозрачност, както и анимиране.

И тук идва основния проблем… нашите приятели от Майкрософт така са омазали нещата че при прозрачност на файла автоматично му се слага сив фон.

Решението:

A. Единия варянт(но не сигурен) за оправяне на проблема е в “background” пропъртито да се добави “transparent” преди url-то на снимката.

Пример:
background: transparent url("/im/testimh.png") top left no-repeat;

B. Втори варянт е просто да не се използва PNG ако може.
C. Трети варянт е с css hack да се зададе прозрачност на фона.

2. Margin-left при блокови елементи.

Оказа се че в IE6 при блоков елемент или елемент с такова пропърти сложения margin-left се чупи като го прави двойно по голям от стойността която му е зададена.

Решението: Задавате на елемента пропъти на инлайн елемент ( display:inline; )

3. Разширяване на <а> таг-а при линкване на картинка

Същността на проблема идва в това че когат линк-а е img таг с настроени width и height правилно и махнат бордер под нея остават 2px празно разтояние.

Решението: Css-a на <а>-то трябва да изглежда така:


a {
width:200px; /* Въвеждате ширината на картинката. */
height:200px; /* Въвеждате височината на картинката. */
display:block;
overflow:hidden;
}

Идеята е такава че със задаването на точна големина на <а> таг-а задаваме и това всичко над тази стойност да се скрива с overflow:hidden;. Така тези 2px биват скрити.