CSS透明背景在IE7-8中不起作用

Question

I'm slowly deleting a few small png files I used for transparent divs, and replacing them with CSS code.

This CSS code works on FF and IE9-10, and it helps in styling a textbox (it also changes the background when you click on it and adds a red 1px border):

#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;
}

Here's the conditional stylesheet for 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 conditional sheet:

    /* 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)";
}

I used IE10 developer tool, and tried to render the page using IE7-8-9 engines.

IE9/10/Firefox -> everything works as expected

IE8 -> Default background and the background change when you click on the textbox ( input:focus ) are not the ones expected. It seems that opacity is not being applied even though the alpha hex values are correct.

IE7 -> Default background works. Background change when you click on the textbox ( input:focus ) doesn't work. Also, the textbox border doesn't turn red when you click on it (see border: 1px solid #ff8277; property from the original sheet)

Here's a demo page: http://www.flapane.com/calcio.php

The search box is in the upper right corner, right of the social sharing buttons.

Any hints?

Thanks in advance

Answer 1

What's happening here is that the regular background declarations interfere with the filters .

To fix it, add background: none to your inputs in LTE IE8 only, either through a second stylesheet or in the same document but by appending \\9 to the declaration.

background: none\\9; targets IE8 and below, just like the wildcard hack ( *background: none; ) which targets IE7 and below, or the underscore hack ( _background: none; ) which targets IE6 and below. You should however only need to use the first.