И след интересната кампания на 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 биват скрити.
Тагове: bug, Internet Explorer, margin