Блог

Главная - Вопросы по программированию - Проблема Internet Explorer и mozilla rgba css3

Проблема Internet Explorer и mozilla rgba css3

#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.