CSS IE условный фон - PullRequest
Новая
       3

CSS IE условный фон

0 голосов
/ 22 ноября 2011

У меня есть фон, который я хотел бы изменить в зависимости от того, какой браузер использует пользователь.Если пользователь использует IE7 или IE8, я хотел бы изменить фон на совершенно другое изображение.

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

Заранее благодарен за любую помощь. 

.navigation{
    background: url("images/navigation.png") no-repeat;
}

Ответы [ 6 ]

3 голосов
/ 22 ноября 2011

Уверен, нет никакого способа сделать это без дополнительной разметки.

Вы можете просто сделать это в HTML: 

<!--[if gte IE7]>
<style type="text/css">
    .navigation{
        background: url("images/navigation.png") no-repeat;
    }
</style>
<![endif]-->

Это не самый сексуальный фрагмент кода, который я когда-либо писал, но он выполняет свою работу без добавления отдельного файла таблицы стилей. Хотя вы могли бы сдаться и сделать файл iehacks.css.

0 голосов
/ 22 ноября 2011

Я бы, вероятно, использовал хаки IE CSS, нацеленные на элемент: http://paulirish.com/2009/browser-specific-css-hacks/. Это устраняет необходимость создания новой таблицы стилей.

0 голосов
/ 22 ноября 2011 
.navigation{
background: url("images/navigation.png") no-repeat;
/*all browsers*/
}
*+html .navigation {
background: url("images/navigation_onlyIE7.png") no-repeat;
/*only IE7 valid css*/
}
@media \0screen { .navigation
background: url("images/navigation_onlyIE8.png") no-repeat;
/*only IE8 NOT valid css*/
}
0 голосов
/ 22 ноября 2011

Есть, но имейте в виду, это недействительно CSS . Лучше всего создать вторую таблицу стилей с условным оператором.

IE7 будет интерпретировать это 

*+html .navigation { background: url("images/navigation.png") no-repeat; }

IE8 будет интерпретировать это 

@media \0screen {
  .navigation { background: url("images/navigation2.png") no-repeat; }
}
0 голосов
/ 22 ноября 2011 
<body onload="setBG()">
<h1>Welcome to my page</h1>

<script>
function setBG(){
document.body.style.backgroundImage=((!!document.all || window.opera) ? 'w3bg.jpg : 'iebg.jpg') // delete the second ! and switch the jpgs
return
}

</script>

Это означает, что если браузер не поддерживает document.all (который поддерживается только в IE4 +) или является Opera, тогда отображать фон iamge w3bg.jpg. Если браузер поддерживает document.all, отобразите фоновое изображение iebg.jpg.

0 голосов
/ 22 ноября 2011

Этот код должен выбирать только фон, если вы используете IE 7 или выше.Другие способы использования условного HTML можно найти по адресу http://css -tricks.com / 132-how-to-create-ie-only-stylesheet / . 

<!--[if gte IE 7]>
    <style type="text/css">
        .navigation{
            background: url("images/navigation.png") no-repeat;
        }

    </style>
<![endif]-->
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...