IE9、IE10 双浸 CSS 不透明度/滤镜

发布于 2024-11-28 09:26:10 字数 395 浏览 0 评论 0原文

我有以下 CSS 样式用于块元素的半透明背景：

/* FF, Chrome, Opera, IE9, IE10 */
background: rgb(255,255,255) transparent; 
background: rgba(255,255,255, 0.7); 
/* IE7, IE8 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2FFFFFF, endColorstr=#B2FFFFFF);

在大多数情况下，这是有效的。然而，IE9 和 IE10 双浸（滤镜和背景样式），因此我们应用了两次叠加层，并且看起来非常不透明。

我怎样才能防止这种情况发生？

干杯！。

原文

I have the following CSS styles for a semi-opaque background to a block element:

/* FF, Chrome, Opera, IE9, IE10 */
background: rgb(255,255,255) transparent; 
background: rgba(255,255,255, 0.7); 
/* IE7, IE8 */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2FFFFFF, endColorstr=#B2FFFFFF);

For the most part this works. However, IE9 and IE10 double dip (both the filter and the background style), so that we get an overlay applied twice and it looks pretty opaque.

How can I prevent this occurring?

Cheers!.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

染火枫林 2024-12-05 09:26:10

您可以将过滤器放在单独的样式表中并为其使用条件语句

<!--[if lt IE 9]>
    <link href="lowie-versions.css" rel="Stylesheet" />
<![endif]-->

我个人认为这些非常hacky但有时您只需要它们

You can place the filter in a seperate stylesheet and used conditional statements for it

<!--[if lt IE 9]>
    <link href="lowie-versions.css" rel="Stylesheet" />
<![endif]-->

I personally find these pretty hacky but sometimes you just need them

回复收藏 0 原文

离去的眼神 2024-12-05 09:26:10

这个解决方案怎么样？

:root *
{
    filter: progid:DXImageTransform.Microsoft.gradient(enabled='false') !important;
}

How about this solution?

:root *
{
    filter: progid:DXImageTransform.Microsoft.gradient(enabled='false') !important;
}

回复收藏 0 原文

扮仙女 2024-12-05 09:26:10

在所有样式表的末尾尝试一下这个：

*:not(#old_ie) {
     filter:progid:DXImageTransform.Microsoft.gradient(enabled=false) !important;
}

它对我有用。这样您就不需要单独的样式表。

现在，如果有人能找到一种专门为 IE9“隔离”CSS 的好方法（没有 HTML 条件注释）……

Try this at the end of all your style sheets:

*:not(#old_ie) {
     filter:progid:DXImageTransform.Microsoft.gradient(enabled=false) !important;
}

It works for me. This way you don’t need a separate stylesheet.

Now if someone could just figure out a nice way to “quarantine” CSS for IE9 specifically (without HTML conditional comments)…

回复收藏 0 原文

蓝梦月影 2024-12-05 09:26:10

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie10 lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie10 lt-ie9"> <![endif]-->
<!--[if IE 9]>         <html class="no-js lt-ie10"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js"> <!--<![endif]-->

“这取自 boilerplate" 那么你可以在 html 标签上使用类，这样你的类特定的 IE8 样式将是 fx像这样：

.yourclass {
  /* FF, Chrome, Opera, IE9, IE10 */
  background: rgb(255,255,255) transparent; 
  background: rgba(255,255,255, 0.7); 
}
.lt-ie9 .yourclass {
  /* IE7, IE8 */
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2FFFFFF, endColorstr=#B2FFFFFF);
}

我认为最好的工作流程

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie10 lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie10 lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie10 lt-ie9"> <![endif]-->
<!--[if IE 9]>         <html class="no-js lt-ie10"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js"> <!--<![endif]-->

"This is taken from boilerplated" then you can use classes on your html tag instead so your class specific IE8 style would be fx like this:

.yourclass {
  /* FF, Chrome, Opera, IE9, IE10 */
  background: rgb(255,255,255) transparent; 
  background: rgba(255,255,255, 0.7); 
}
.lt-ie9 .yourclass {
  /* IE7, IE8 */
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2FFFFFF, endColorstr=#B2FFFFFF);
}

Best workflow in my oppion

回复收藏 0 原文

~没有更多了~