Окремі стилі css для браузерів internet explorer (ie), блог nubic а

Будь-яка людина створював собі сайт, ну і звичайно абсолютно будь-верстальник стикався і знає що браузер internet explorer (ie) читає стилі як то за своїм і більш того дуже часто версія 6 і 7 абсолютно по різному відображають ваш код. З цієї причини деяким частенько доводилося переверстувати деякі елементи або відмовлятися від деяких прийомів.







Ще однією причиною написати цей пост було те, що я згадав що шановний Shibaon 'чег як то давненько зіткнувся з проблемкою коли все відображалося коректно, але сам код файлу стилів виходив невалідний, а для нього це на той момент було дуже важливо, як і до сих пір напевно

Крім того це актуально ще й тому що сімейство Internet Explorer досі є самим часто використовуваним браузером, і навіть так мною нелюбимий (і я думаю багатьма) Internet Explorer 6, який взагалі читає стилі як йому заманеться.

Так ось вирішення цих проблем досить просте. Ви маєте можливість просто написати окремі стилі які будуть працювати тільки в браузері internet explorer (ie)

Для всіх версій IE так:



або навпаки ie НЕ буде його сприймати а решта сприймати що не є принциповим кому як зручніше:









Для конкретних версій більш точне умова тобто треба поставити цифру версії:













Найцікавіше що таким способом можна ще й приховувати html-код як від усіх версій internet explorer (ie) так і від певної.
Наприклад, напис «Привіт Світ» буде відображатися у всіх браузерах окрім ie7, якщо помістити її в умова:


Привіт світ


Ось така цікава особливість.

Далі у нас йдуть такі фішечки і хакі які відмінно працюють але роблять код не дійсним, а деяким це важливо, хоча я вважаю що кілька невеликих помилок виявлених валідатором погоди не роблять:

Для IE7 є хак

Для IE6 можна просто перед властивістю використовувати знак мінус (-) або нижнє підкреслення (_)

Можна ще зробити так:

div background: green; / * Для нормальних браузерів * /
// background: blue; / * Для всіх ie * /
-background: red; / * Для ie6 * /
>
* Html div background: red; / * Ще один спосіб для ie6, кому як зручніше * /
>

Тобто в даному прикладі фон (background) буде зеленого кольору в нормальних браузерах (Opera, FF), синім в IE7 і червоним в IE6

Ну звичайно кольору це так для прикладу, а взагалі зазвичай використовується для коректного Отображаніе положення і відстаней, відступів в пікселях і відсотках.

Ну і в догонку пару хаков для інших браузерів тобто які не сприймаються IE але працюють для інших

html: root ваш_елемент / * актуально і для Safari * /







Схожі статті