Условные комментарии в CSS - PullRequest
Новая
       4

Условные комментарии в CSS

4 голосов
/ 02 октября 2011

Я сейчас разрабатываю тему для домашней страницы, но столкнулся с несколькими проблемами.По какой-то причине у меня нет доступа к редактированию самого html-кода, и мне нужно написать собственный .css для IE (в частности, версии ниже IE9).

У меня «две» проблемы.Первый - это двойные фоны.Версии ниже IE9 не могут сделать их безупречными.Если IE пропускает элемент, это нормально, но поскольку графика в этом элементе работает совместно с другим элементом (для плавного графического перехода), это делает другой элемент странным.Графика в этом втором элементе - это фон внутри блока div.Я хочу, чтобы этот фон был другим пользовательским фоном, который отображается только в том случае, если пользователь использует IE в качестве браузера;и, если возможно, я хочу, чтобы это относилось только к версиям ниже IE9 (сайт отображается с двойным фоном в IE9).

http://patrikarvidsson.com/project/sohelp/illustration.jpg

CSS выглядит так (#mainframe isчасть под заголовком навигационного окна).Нижнее изображение - это то, как оно отображается в IE8.IE7 показывает то же самое.Во-первых, это FF / Chrome / Safari и IE9. 

#mainframe {
background: url('img/bg2.png') no-repeat,
            url('img/bg1.png') repeat-y !important;
}

Я много искал в сети, также спрашивал друзей, и, похоже, это не работает без написания условных комментариев в html.разметки.Я что-то пропустил?Это выполнимо как-то только с использованием файлов .css?

Сайт использует jquery.Я не знаю этого, но я подумал, что упомяну об этом на всякий случай.

Ответы [ 3 ]

9 голосов
/ 02 октября 2011

Возможно, вы захотите заглянуть в эту статью , в которой объясняется, как использовать условные комментарии для установки классов в элементе html. Затем вы можете использовать этот класс для нацеливания на конкретные браузеры в вашей таблице стилей, чистым способом.

Ваш HTML-тег будет выглядеть примерно так: 

<!--[if lt IE 7]> <html class="ie6"> <![endif]-->
<!--[if IE 7]>    <html class="ie7"> <![endif]-->
<!--[if IE 8]>    <html class="ie8"> <![endif]-->
<!--[if IE 9]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html> <!--<![endif]-->

Редактировать 2

После объявления о том, что IE10 не будет поддерживать условные комментарии, было бы неплохо обновить этот ответ. Я протестировал тип комментариев, которые он будет поддерживать, и кажется, что вышеприведенное все еще будет работать, но , если вы хотите настроить таргетинг выше 10 или только на 10, вам не повезет . Как предложили сами Microsoft в своем блоге (ссылка в комментариях @MarcoDemaio), вы должны использовать функцию обнаружения.

Тогда вы можете сделать что-то вроде этого в вашем CSS: 

.somestyle {
    background: transparent url('derp.jpg') no-repeat;
}

/* ie6 fallsback class */
.ie6 .somestyle {
    background: #eee; 
}

Прочитайте статью, и удачи;)

Редактировать 2:

Поскольку IE7 больше не является моей главной заботой, а IE9 довольно последовательный в своем поведении, я могу обойтись без следующего кода (который добавит класс только для версий IE меньше, чем IE9): 

<!--[if lt IE 9]><html class="lte9"><![endif]-->
<!--[if gt IE 8|!IE]><!--><html><!--<![endif]-->

Редактировать 1:

Хорошо, мне удалось пропустить ваш комментарий "не удается редактировать html".

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

Что-то вроде этого: 

.someclass {
    *color: blue; /* IE 7 and below */
    _color: blue; /* IE 6 */
}

/* IE6, IE7 - asterisk hack */
.someclass  { *color: blue; }

/* IE8 - winning hack */
.someclass  { color: blue\0/; } /* must be last declaration in the selector's ruleset */
0 голосов
/ 02 октября 2011

Для вашей проблемы с двойным фоном вам просто нужно добавить еще один содержащий элемент. 

<div class="element">
...
</div>

становится 

<div class="container">
    <div class="element">
    ...
    </div>
</div>

Я не уверен, почему вы не смогли быОтредактируйте вручную HTML, но если у вас есть доступ к файлу javascript и вы используете jQuery, вы можете добавить класс следующим образом: 

$('.element').wrap('<div class="container" />');

Вы можете использовать CSS-хаки дляИзбегайте использования условных комментариев.Хаки CSS не так часто используются в настоящее время, так как средний пользователь 1013 * использует браузер, который не требует каких-либо хаков для правильного отображения, но это все еще полностью допустимый и надежный способ избежать использования условных операторов HTML.В зависимости от желаемой специфики у вас есть куча разных хаков, которые вы можете использовать для таргетинга только на определенные версии IE: 

* html .element { color: #fff; /* IE6 only */ }
html .element { _color: #333; /* IE7 only */
*+html .element { color: #999; /* IE7 only */ }
html .element { *color: #000; /* IE7 and below */
html .element { color: #ccc\9; /* IE8 and below */ }

Итак: 

#container { background: url(img/bg1.png) repeat-y\9; }
#container #mainframe { 
    background: url('img/bg2.png') no-repeat, url('img/bg1.png') repeat-y !important;
    background: url('img/bg2.png') no-repeat\9; }
0 голосов
/ 02 октября 2011

У меня была эта проблема в моем приложении CMS, поэтому ...

Создайте контейнерный элемент div, его класс, имя и версия браузера должны выглядеть так: 

<div class="ie_6_0">

<div class="your_custom_elements">
 ///////
</div>

</div>

а вам CSS классы нравятся 

.your_custom_elements{common styles between versions}
.ie_6_0 .your_custom_elements{do somthink for old versions}
.ie_9_0 .your_custom_elements{do somthink for new versions}

ОБНОВЛЕНИЕ 1

или как 

<div id="mainframe" class="ie_6_0">
///
</div>

и CSS как 

#mainframe{common styles between versions}
#mainframe.ie_6_0{do somthink for old versions}
#mainframe.ie_9_0{do somthink for new versions}

ie_6_0: поскольку имя вашего браузера и его версия должны запрашивать его и добавлять его по коду.

...