Открытка прикол а мне еще не

дата: Май 2, 2009 автор: Nubic Категория: Создание сайтов 
Метки: css, ie, верстка, кроссбраузерность

Любой человек создававший себе сайт, ну и конечно абсолютно любой верстальщик сталкивался и знает что браузер internet explorer (ie) читает стили как то по своему и более того очень часто версия 6 и 7 совершенно по разному отображают ваш код. По этой причине некоторым частенько приходилось переверстывать некоторые элементы или отказываться от некоторых приемов.

Еще одной причиной написать этот пост было то, что я вспомнил что уважаемый Shibaon‘чег как то давненько столкнулся с проблемкой когда все отображалось корректно, но сам код файла стилей получался невалидный,а для него это на тот момент было очень важно, как и до сих пор наверное :)

Кроме того это актуально еще и потому что семейство Internet Explorer до сих пор является самым часто используемым браузером, и даже так мной нелюбимый (и я думаю многими) Internet Explorer 6, который вообще читает стили как ему вздумается.

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

Первым самым простым способом является возможность подключать отдельный файл стилей для всех ie либо для конкретной версии, а другие (нормальные :)) браузеры не будут читать и воспринимать этот файл.

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

<!- -[if IE]>
<link rel=»stylesheet» type=»text/css» href=»ie.css» />
<![endif]- ->

или наоборот ie не будет его воспринимать а остальные воспринимать что не принципиально кому как удобнее:

<![if!IE]>
<link rel=»stylesheet» type=»text/css» href=»ne-dlya-ie.css» />
<![endif]>

Для конкретных версий более точное условие то есть надо поставить цифру версии:

<![if!IE 5]>
<link rel=»stylesheet» type=»text/css» href=»ne-dlya-ie5.css» />
<![endif]>

<![if!IE 6]>
<link rel=»stylesheet» type=»text/css» href=»ne-dlya-ie6.css» />
<![endif]>

<![if!IE 7]>
<link rel=»stylesheet» type=»text/css» href=»ne-dlya-ie7.css» />
<![endif]>

или наоборот так:

<!- -[if IE 5]>
<link rel=»stylesheet» type=»text/css» href=»ie5.css» />
<![endif]- ->

<!- -[if IE 6]>
<link rel=»stylesheet» type=»text/css» href=»ie6.css» />
<![endif]- ->

<!- -[if IE 7]>
<link rel=»stylesheet» type=»text/css» href=»ie7.css» />
<![endif]- ->

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

<![if!IE 7]>
<p>Привет Мир</p>
<![endif]>

Вот такая интересная особенность.

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

Например если перед css свойством поставить два слеша ( // ), то это свойство будет прочитано только internet explorer (ie) всех версий, а другие его просто проигнорируют.

Для IE7 имеется хак

:first-child+html ваш_элемент {…}

или

+html ваш_элемент {…}

Для IE6 можно просто перед свойством использовать открытка прикол а мне еще не знак минус(-) или нижнее подчеркивание(_)

Можно еще сделать так:

html ваш_элемент {…}

Например

div {
background: green; / для нормальных браузеров /
//background: blue; / для всех ie /
-background: red; / для ie6 /
}
html div {
background: red; / ещё один способ для ie6, кому как удобнее :) /
}

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

Ну конечно цвета это так для примера, а вообще обычно используется для корректного отображание положения и расстояний, отступов в пикселях и процентах.

Ну и в догонку пару хаков для других браузеров т.е не воспринимаемые IE но работающие для других

Для FireFox:

html:root ваш_элемент {…}  / актуально и для Safari /

или

ваш_элемент, x:-moz-any-link {…}

Для Opera:

html:first-child ваш_элемент {…}

или

@media all and (min-width: 0) {
ваш_элемент {…}
}

Вот вобщем несколько приколов как справится с internet explorer пользуйтесь наздоровье :)

Интернет - не темный лес. Подпишись на RSS!

Похожие записи

Комментарии


Источник: http://nubic.ru/?p=565



Рекомендуем посмотреть ещё:


Закрыть ... [X]

Сайт бесплатных открыток: отправить открытку Открытки рождение внука

Открытка прикол а мне еще не

Приколы Дуделка - Интересные новости и фото

Открытка прикол а мне еще не

Отдельные стили css для браузеров Internet Explorer

Открытка прикол а мне еще не

Прикольные поздравления с днем рождения

Открытка прикол а мне еще не

Весёлые детские стихи_2 Класс39

Открытка прикол а мне еще не

My - love - анимационные картинки, открытки на каждый

Открытка прикол а мне еще не

«Волхв» читать - knigosite. org

Открытка прикол а мне еще не

Анекдотов. net - анекдоты в рунете, первоисточник смешных

Открытка прикол а мне еще не

Детское творчество - аппликации, поделки из

Открытка прикол а мне еще не

Дизайн-студия NOMMO - оформление праздников

Открытка прикол а мне еще не

Дореволюционная Россия в цветных фотографиях

Открытка прикол а мне еще не

Красивые бесплатные анимационные открытки картинки с

Открытка прикол а мне еще не

Новогодние открытки своими руками - IhappyMAMA

Открытка прикол а мне еще не

Открытка «Маленькие радости»

Открытка прикол а мне еще не

Открытка с осенними листьями. Открытка 8653

Открытка прикол а мне еще не

Открытка: основы этикета



Похожие новости