跨浏览器透明度 - 适用于所有内容,即10

时间:2013-05-30 18:08:47

标签: css cross-browser transparency internet-explorer-10

我正在使用以下代码,这些代码对于那些必须在多个浏览器中使背景透明但不是儿童的任何人看起来都很熟悉。这是我网站上的一个基础包装。

div#all { 
    background: rgb(255, 255, 255); /* fallback for web browsers that don't support RGBa */
    background: rgba(255, 255, 255, 0.0); /* RGBa with 0.0 opacity */
    /* for ie */
    background: transparent\9; /* for ie - resetting background color hack */
    zoom:1; /* for ie - required for the filters */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF, endColorstr=#00FFFFFF); /* for ie 5.5 - 7 */
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF, endColorstr=#00FFFFFF)"; /* for ie 8 */
}

问题是,它的效果很好'直到Win8 / IE10(仅限IE 10标准。“IE 10桌面”很好)。 IE 10将该站点显示为一个纯白色块。如果我删除以下内容,IE 10可以正常工作,但IE的旧版本会中断。

background: transparent\9; /* for ie - resetting background color hack */

由于IE 10忽略了条件语句,如何解决这个问题?

作为参考,我非常擅长php / css / html,但我的javascript / jquery不是那么热门,所以如果这是解决方案请详细说明。我的网站是www.waterutilitymanagementservices.com

提前致谢!

1 个答案:

答案 0 :(得分:1)

我遇到了同样的问题,我认为这个问题反映了IE8 hack

最好的解决方案是使用IE8的suppurate css,条件在顶部,可能不会影响其他版本的IE :)

<!--[if lte IE 8]>
    <link rel="stylesheet" type="text/css" href="ie8-and-down.css" />
<![endif]-->

或者您可以尝试这样

<!--[if lte IE 7]> <html class="ie7"> <![endif]-->  
<!--[if IE 8]>     <html class="ie8"> <![endif]-->  
<!--[if IE 9]>     <html class="ie9"> <![endif]-->  
<!--[if !IE]><!--> <html>             <!--<![endif]-->

你可以为dirrent版本提供合适的代码

   .element {  
        background: red;  
    }  
    .ie7 .element {  
        background: blue;  
    }  
    .ie8 .element {  
        backgroundt: green;  
    }  
    .ie9 .element {  
        margin-left: yellow;  
    }