Каждый разработчик сайтов должен понимать что такое кроссбраузерность и уметь делать сайты что бы отображались во всех браузерах одинаково. Лично я не все знаю о кроссбраузерности :) Но, то что знаю, то и напишу. Самый проблемный браузер - Internet Explorer. (When did you die?). Сейчас будем решать некоторые проблемы.
Шестая версия ИЕ вообще мало какие html-теги понимает... Седьмую и восьмую версию чему то научили уже. Но, все равно этот браузер от нормальных браузеров отстает на 4-5 лет.
Наконец то разработчики Internet Explorer признали очень низкое качество своего "мего" - браузера.
Так же они создали свойство - условный комментарий, который понимает только этот браузер как обычный исходный код (не все как у людей), а нормальные браузеры понимают это как обычный комментарий к html-коду. В этих комментариях вы можете задавать условия для разных версий Internet Explorer.
Условный комментарий для Internet Explorer 6:
Условный комментарий для Internet Explorer 7:
Специфичные целевые элементы - это своего рода аналог условных комментариев в CSS файлах. Свойства, специально отмеченные (с * или _ в начале) будут восприниматься только конкретными версиями Internet Explorer:
А в следующих частях статьи речь пойдет о обычных багах Internet Explorer и способах борьбы с ними.
Пожалуй, это самый распространенный баг при работе с плавающими элементами. В случае примера выше, Internet Explorer 6 удвоит правый отступ. Для предотвращения этого, добавьте к этому элементу свойство display: inline при помощи условных комментариев или специфичных целевых элементов.
Если вы попробуете добавить CSS свойство padding к кнопкам, то изменения в браузерах Internet Explorer 6 и 7, они просто проигнорируют это. Для исправления этого, добавьте overflow: visible к вашей кнопке, и проблема будет решена.
Internet Explorer 6 и отрицательные отступы - это не совместимые вещи. Чтобы ваша веб-страница отображалась корректно, к элементу с отрицательным отступом необходимо добавить свойство position: relative.
Линейка браузеров Internet Explorer - это большая проблема не только для веб-мастеров, но и для его создателя, т.е. корпорации Microsoft. Поэтому она проводит политику отказа от этого устаревшего браузера, и этому процессу даже посвящен сайт Ie6countdown.com.
На сайте показана карта где видно, что в США найменьше используют этот браузер. Хотя, я думал, что там найболее будут его использовать. Майкрософт же с тех регионов. А вот в самой продвинутой стране Китай - активность браузера Internet Explorer зашкаливает! Почему так это? Они экономят на чем то? Или через Internet Explorer нельзя обнаружить ДДОС-аттаку? :)
Шестая версия ИЕ вообще мало какие html-теги понимает... Седьмую и восьмую версию чему то научили уже. Но, все равно этот браузер от нормальных браузеров отстает на 4-5 лет.
Условные комментарии
Наконец то разработчики Internet Explorer признали очень низкое качество своего "мего" - браузера.
Так же они создали свойство - условный комментарий, который понимает только этот браузер как обычный исходный код (не все как у людей), а нормальные браузеры понимают это как обычный комментарий к html-коду. В этих комментариях вы можете задавать условия для разных версий Internet Explorer.
Условный комментарий для Internet Explorer 6:
<!--[if IE 6]>
Код, воспринимаемый только браузером Internet Explorer 6
<![endif]-->
Условный комментарий для Internet Explorer 7:
<!--[if IE 7]>
Код, воспринимаемый только браузером Internet Explorer 7
<![endif]-->
Специфичные целевые элементы
Специфичные целевые элементы - это своего рода аналог условных комментариев в CSS файлах. Свойства, специально отмеченные (с * или _ в начале) будут восприниматься только конкретными версиями Internet Explorer:
p {
*color: red; /* Абзацы станут красными только в Internet Explorer 7 и ниже */
_color: blue; /* Абзацы станут синими только в Internet Explorer 6 и ниже */
}
А в следующих частях статьи речь пойдет о обычных багах Internet Explorer и способах борьбы с ними.
Двойные отступы
p {
float: right;
margin-right: 50px;
}
Пожалуй, это самый распространенный баг при работе с плавающими элементами. В случае примера выше, Internet Explorer 6 удвоит правый отступ. Для предотвращения этого, добавьте к этому элементу свойство display: inline при помощи условных комментариев или специфичных целевых элементов.
Игнорирование padding у кнопок
Если вы попробуете добавить CSS свойство padding к кнопкам, то изменения в браузерах Internet Explorer 6 и 7, они просто проигнорируют это. Для исправления этого, добавьте overflow: visible к вашей кнопке, и проблема будет решена.
Отрицательные отступы
Internet Explorer 6 и отрицательные отступы - это не совместимые вещи. Чтобы ваша веб-страница отображалась корректно, к элементу с отрицательным отступом необходимо добавить свойство position: relative.
И в заключение
Линейка браузеров Internet Explorer - это большая проблема не только для веб-мастеров, но и для его создателя, т.е. корпорации Microsoft. Поэтому она проводит политику отказа от этого устаревшего браузера, и этому процессу даже посвящен сайт Ie6countdown.com.
На сайте показана карта где видно, что в США найменьше используют этот браузер. Хотя, я думал, что там найболее будут его использовать. Майкрософт же с тех регионов. А вот в самой продвинутой стране Китай - активность браузера Internet Explorer зашкаливает! Почему так это? Они экономят на чем то? Или через Internet Explorer нельзя обнаружить ДДОС-аттаку? :)
- Владислав
- 1-06-2012, 17:25
- 6 676