#css #rgba
#css #rgba
Вопрос:
У меня такой стиль css:
background:#000;
background:rgba(0,0,0,0.7);
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000,endColorstr=#B2000000)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000,endColorstr=#B2000000); /* IE6 amp; 7 */
zoom: 1;
Он отлично работает в Internet Explorer, но я должен сохранить background: transparent; стиль. Если я сохраню это, mozilla сделает мой фон прозрачным
Есть идеи?
Ответ №1:
Научитесь справляться с причудами IE, используя условные обозначения IE:
http://www.quirksmode.org/css/condcom.html
<style type="text/css">
.stuff {
background:#000;
background:rgba(0,0,0,0.7);
}
</style>
<!--[if IE]>
<style type="text/css">
.stuff {
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000,endColorstr=#B2000000)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000,endColorstr=#B2000000); /* IE6 amp; 7 */
zoom: 1;
}
</style>
<![endif]-->
<div class="stuff">Stuff</div>
демонстрация jsfiddle:http://jsfiddle.net/cYtKJ/1
Редактировать
Вы также можете использовать его для импорта файлов разных стилей:
<link rel="stylesheet" type="text/css" href="style.css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="style-ie.css">
<![endif]-->
Вам просто нужно быть осторожным и ставить style-ie.css последним, если он переопределяет другие команды css.
Комментарии:
1. Что ж, что вы, вероятно, хотите сделать, это закодировать ваш style.css как обычно, а затем создать style-ie.css и выполнить отдельный вызов для его импорта с использованием условного обозначения. Смотрите мою правку.
2. И нет, вам не нужны условные обозначения внутри ваших файлов .css (или .js), поскольку они являются HTML и нарушат работу этих файлов.
Ответ №2:
background: transparent;
background:rgba(0,0,0,0.7);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000,endColorstr=#B2000000)"; /* IE8 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2000000,endColorstr=#B2000000); /* IE6 amp; 7 */
zoom: 1;
Проблема решена.
Однако в IE9 могут возникнуть проблемы, поскольку он также поддерживает RGBA.
Поэтому, вероятно, лучшим решением будет использовать условные комментарии или просто резервный вариант сплошного цвета в браузерах, отличных от RGBA.