У великого (по доле рынка) творения Microsoft — браузера Internet Explorer раньше 7 версии имеется множество недостатков, среди которых современных веб-дизайнеров и разработчиков наиболее напрягают:
Эти проблемы должны решиться, если все пользователи IE перейдут на седьмую версию. Для тех, кто не хочет ждать, я представляю три лучших лекарства от этих недомоганий браузера.
Два из трех решений являются «HTML-компонентами» (.htc), одно основано на JavaScript+.htc. Прочие браузеры HTC не понимают, и ничего плохого не происходит. JavaScript подключается через conditional comment.
HTC не работают, если пользователь запретил выполнение ActiveX на страницах. Скрипт тоже можно отключить. Кроме того, есть естественное ограничение на номер версии — не древнее IE 5.5. Так что всегда найдутся пользователи, которым ваши улучшения не помогут — но что уж с таких «убогих» взять!
Сайт: http://www.xs4all.nl/~peterned/csshover.html
Демо: http://www.xs4all.nl/~peterned/examples/cssmenu.html
Файл: http://www.xs4all.nl/~peterned/htc/csshover.htc
IE понимает этот псевдокласс только для тега A. Откуда такое ограничение — непонятно, но производство всплывающих меню и прочих «мышкочувствительных» спецэффектов вследствие этого незаслуженно затруднено.
Применить же whatever:hover несложно:
После этого псевдоклассом «:hover» можно спокойно пользоваться.
Об ограничениях использования (они есть, но в моей практике не встречались) можно прочитать на сайте.
Там же приводится также вторая версия этого HTC (http://www.xs4all.nl/~peterned/htc/csshover2.htc), но нововведение там не столь нужное, с еще большими ограничениями, так что я предпочитаю первую версию (которая продолжает развиваться).
Сайт: http://www.twinhelix.com/css/iepngfix/
Демо: http://www.twinhelix.com/css/iepngfix/demo/
Файл: http://www.twinhelix.com/css/iepngfix/iepngfix.zip
PNG позволяет использовать восьмибитный альфа-канал, но что нам толку с того, если Ослик показывает полупрозрачные области на сером фоне!
Множество решений этой проблемы касалось только тега IMG или только фона элемента. IE PNG Fix позволяет вам не париться по обоим поводам. Итак, применяем:
Ограничения касаются фоновых изображений — повторяться они не будут (background-repeat:no-repeat), позиционироваться (background-position: *) — тоже, поскольку фон всё так же ставится через фильтр, нам просто облегчили его применение.
Сайт: http://dean.edwards.name/IE7/
Демо: http://dean.edwards.name/IE7/compatibility/Pure%20CSS%20Menus.html
Файл: http://downloads.sourceforge.net/ie7/IE7_0_9.zip?modtime=1124553772&big_mirror=0
Эта библиотека не только предоставляет возможность использования PNG в IE 5 и 6, но также включает селекторы CSS2 (в том числе :hover), CSS-свойства max/min-width/height, «position: fixed» и делает еще много полезных вещей.
IE теперь совместим со стандартами, хаки и обходные пути остались в прошлом — так заявляет автор. Рекомендую внять заявлениям и попробовать:
Ограничений много. Улучшения в области CSS не касаются стилей, вписанных прямо в тэги (inline styles, style="*"). Если структура документа меняется скриптом, впоследствии необходимо вызвать document.recalc(). Работать в JavaScript со свойствами className и runtimeStyle можно только в рамках предлагаемых автором методик (http://dean.edwards.name/IE7/caveats/).
- плохая поддержка селекторов CSS2 (в частности, слабая поддержка псевдокласса :hover)
- плохая поддержка PNG с градациями прозрачности.
Эти проблемы должны решиться, если все пользователи IE перейдут на седьмую версию. Для тех, кто не хочет ждать, я представляю три лучших лекарства от этих недомоганий браузера.
Два из трех решений являются «HTML-компонентами» (.htc), одно основано на JavaScript+.htc. Прочие браузеры HTC не понимают, и ничего плохого не происходит. JavaScript подключается через conditional comment.
HTC не работают, если пользователь запретил выполнение ActiveX на страницах. Скрипт тоже можно отключить. Кроме того, есть естественное ограничение на номер версии — не древнее IE 5.5. Так что всегда найдутся пользователи, которым ваши улучшения не помогут — но что уж с таких «убогих» взять!
Включаем псевдокласс «:hover» — whatever:hover от Peter Nederlof
Сайт: http://www.xs4all.nl/~peterned/csshover.html
Демо: http://www.xs4all.nl/~peterned/examples/cssmenu.html
Файл: http://www.xs4all.nl/~peterned/htc/csshover.htc
IE понимает этот псевдокласс только для тега A. Откуда такое ограничение — непонятно, но производство всплывающих меню и прочих «мышкочувствительных» спецэффектов вследствие этого незаслуженно затруднено.
Применить же whatever:hover несложно:
- Скачиваем файл, складываем его, например, в папку /css/
- В стиле HTML-страницы пишем
body{
behavior: url(/css/csshover.htc);
}
После этого псевдоклассом «:hover» можно спокойно пользоваться.
Об ограничениях использования (они есть, но в моей практике не встречались) можно прочитать на сайте.
Там же приводится также вторая версия этого HTC (http://www.xs4all.nl/~peterned/htc/csshover2.htc), но нововведение там не столь нужное, с еще большими ограничениями, так что я предпочитаю первую версию (которая продолжает развиваться).
Делаем полупрозрачные PNG — IE PNG Fix от Angus Turnbull
Сайт: http://www.twinhelix.com/css/iepngfix/
Демо: http://www.twinhelix.com/css/iepngfix/demo/
Файл: http://www.twinhelix.com/css/iepngfix/iepngfix.zip
PNG позволяет использовать восьмибитный альфа-канал, но что нам толку с того, если Ослик показывает полупрозрачные области на сером фоне!
Множество решений этой проблемы касалось только тега IMG или только фона элемента. IE PNG Fix позволяет вам не париться по обоим поводам. Итак, применяем:
- Скачиваем файл
- Прописываем его в css, например:
img, div {behavior: url(iepngfix.htc)}
или даже
* {behavior: url(iepngfix.htc)}
Ограничения касаются фоновых изображений — повторяться они не будут (background-repeat:
Всё и сразу — IE7 от Dean Edwards
Сайт: http://dean.edwards.name/IE7/
Демо: http://dean.edwards.name/IE7/compatibility/Pure%20CSS%20Menus.html
Файл: http://downloads.sourceforge.net/ie7/IE7_0_9.zip?modtime=1124553772&big_mirror=0
Эта библиотека не только предоставляет возможность использования PNG в IE 5 и 6, но также включает селекторы CSS2 (в том числе :hover), CSS-свойства max/min-width/height, «position: fixed» и делает еще много полезных вещей.
IE теперь совместим со стандартами, хаки и обходные пути остались в прошлом — так заявляет автор. Рекомендую внять заявлениям и попробовать:
- Скачиваем файл
- В <head> страницы, но обязательно после META content-type пишем:
<!--[if lt IE 7]> <script src="/ie7/ie7-standard-p.js" type="text/javascript"> </script> <![endif]-->
Ограничений много. Улучшения в области CSS не касаются стилей, вписанных прямо в тэги (inline styles, style="*"). Если структура документа меняется скриптом, впоследствии необходимо вызвать document.recalc(). Работать в JavaScript со свойствами className и runtimeStyle можно только в рамках предлагаемых автором методик (http://dean.edwards.name/IE7/caveats/).
