Lia*_*rch 15 css internet-explorer-9
我正在尝试使用CSS3 rgba()和microsoft的filter属性混合使得div的背景透明,如下所示:
div {
width: 200px;
height: 200px;
/* blue, 50% alpha */
background: rgba(0,0,255,0.5);
/* red, 50% alpha */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFF0000,endColorstr=#7FFF0000);
}
正如预期的那样,支持的浏览器rgba()会将div渲染为蓝色,而IE 6-8会将其渲染为红色.
IE9显然可以处理两者(之前我认为filter支持已被删除),结果是紫色 div.是否有任何方法可以使IE9支持这些属性而不支持其他属性？rgba()显然是首选.
NB我正在使用IETester来运行这些测试.如果IE9的正确版本没有这样做,请告诉我.
Lia*_*rch 16
我想出了一个我认为我会分享的hacky解决方法.
IE9及以上版本支持:not()CSS伪选择器.通过使用元素上不存在的属性,我们可以让IE9禁用它的filter渐变:
div {
width: 200px;
height: 200px;
/* For FF, Chome, Opera, IE9+ */
background: rgba(0,0,255,0.5);
/* For IE6-9 */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFF0000,endColorstr=#7FFF0000);
}
div:not([dummy]) {
/* IE9 only */
filter: progid:DXImageTransform.Microsoft.gradient(enabled='false');
}
我最终使用了这个,因为我的透明div只有一次.它似乎有点整洁,保持CSS的东西,而不是在HTML中使用条件注释.
编辑:为了支持其他答案,我发现微软开发团队的这篇文章鼓励开发人员使用条件评论,而不是像我这样的CSS解决方法.
小智 7
如果您使用的是HTML5,则可能需要沿着使用途径前进
<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6 oldie"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="ie7 oldie"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie8 oldie"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en" class="gtie9 modern">
<!--<![endif]-->
在你的CSS中使用类似的东西:
.ie9 .element {filter: none; }
这似乎对我有用(并未在所有版本中进行全面测试).根据本博客中的讨论:root选择器仅在IE9中可用,因此可以编写下面的代码以删除IE9中的所有过滤器设置.
:root *
{
filter: progid:DXImageTransform.Microsoft.gradient(enabled='false') !important;
}
编辑:!重要的是确保它在所有地方都有效.
小智 5
使用条件注释查看浏览器/版本定位.您将希望定位特定版本的IE并实现每个版本的样式.
http://www.positioniseverything.net/articles/cc-plus.html
| 归档时间： |
|
| 查看次数： |
22995 次 |
| 最近记录： |