CSS прозрачный фон не работает в IE7-8

Question

Я медленно удаляю несколько небольших файлов png, которые я использовал для прозрачных div, и заменяя их кодом CSS.

Этот код CSS работает на FF и IE9-10, и это помогает в стилизации текстовое поле (он также меняет фон при нажатии на него, и добавляет красный 1px границу):

#searchbars input { 
    width: 130px; 
    border: 1px solid #FFF; 
    padding: 4px 2px 2px 10px; 
    font-size: .9em; 
    font-family: Helvetica, Arial, sans-serif; 
    height: 16px; 

    /* Fallback for web browsers that doesn't support RGBa */ 
    background: rgb(22, 22, 22) transparent; /* #161616/
    /* RGBa with 0.28 opacity */ 
    background: rgba(22, 22, 22, 0.28); 
    color: #FFF; 
} 

#searchbars input:active, 
#searchbars input:focus { 
    /* Fallback for web browsers that doesn't support RGBa */ 
    background: rgb(22, 22, 22) transparent; /* #161616/
    /* RGBa with 0.75 opacity */ 
    background: rgba(22, 22, 22, 0.75); 
    border: 1px solid #ff8277; 
} 

Вот условная таблица стилей для IE7:

/* For IE 5.5 - 7*/ 
    #searchbars input { 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#47161616, endColorstr=#47161616); 
} 

#searchbars input:active, #searchbars input:focus { 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#bf161616, endColorstr=#bf161616); 
} 

IE8 условного листа:

/* For IE 8*/ 
    #searchbars input { 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#47161616, endColorstr=#47161616)"; 
} 

#searchbars input:active, #searchbars input:focus { 
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#bf161616, endColorstr=#bf161616)"; 
} 

Я использовал IE10 разработчик инструмент и попытался отобразить страницу с использованием движков IE7-8-9.

IE9/10/Firefox -> все работает, как ожидалось

IE8 -> фон по умолчанию и изменение фона при нажатии на текстовое поле (input:focus) не те ожидаемые. Кажется, что непрозрачность не применяется, даже если значения альфа-шестнадцатеричного значения верны.

IE7 -> Работы по умолчанию фона. Изменение фона при нажатии на текстовое поле (input:focus) не работает. Кроме того, граница текстового поля не краснеет при нажатии на него (см border: 1px solid #ff8277; свойства из исходного листа)

Вот демонстрационная страница: http://www.flapane.com/calcio.php

Окно поиска находится в правом верхнем углу, справа кнопок социального обмена.

Любые подсказки?

Заранее спасибо

Answer 1

То, что здесь происходит, что регулярные background декларации мешают filters.

Чтобы это исправить, добавьте background: none к вашим inputs в LTE IE8 только, либо через вторую таблицу стилей или в том же самом документе, но путем добавления \9 к декларации.

background: none\9; цели IE8 и ниже, так же, как групповой символ взломать (*background: none;), который нацелен на IE7 и ниже, или хак с подчеркиванием (_background: none;), который нацелен на IE6 и ниже. Однако вам нужно использовать только первый.