发表新帖
发表新帖

rgba background with IE filter alternative: IE9 renders both!

后端 未结
关注
5 780
故里飘歌
故里飘歌 2020-12-15 07:42

I\'m trying use make a div\'s background transparent using a mixture of CSS3 rgba() and microsoft\'s filter property like this:

div
相关标签:
5条回答
  • 长发绾君心
    2020-12-15 07:50

    Take a look at browser/version targeting using conditional comments. You'll want to target specific versions of IE and implement your styling per-version.

    http://www.positioniseverything.net/articles/cc-plus.html

    0 讨论(0)
  • 野趣味
    2020-12-15 07:55

    I’ve come up with a hacky workaround that I thought I'd share.

    IE9 and above supports the :not() CSS pseudo selector. By using an attribute that doesn’t exist on an element we can get IE9 to disable it's filter gradient:

    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');
}

    I ended up using this because my transparent div only features once. It also seemed a little neater keeping things to CSS, rather than using conditional comments in the HTML.

    Edit: In support of other answers, I found this article from the Microsoft dev team encouraging developers to use conditional comments, not CSS workarounds like mine.

    0 讨论(0)
  • 太阳男子
    2020-12-15 08:03

    If you're using HTML5 you may want to go down the route of using

    <!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]-->

    and in your CSS use something like :

    .ie9 .element {filter: none; }
    0 讨论(0)
  • 旧时难觅i
    2020-12-15 08:04

    This seems to work for me (not fully tested in all versions). According to the discussions in this blog the :root selector is only available in IE9 and thus the code below can be written to remove all filter settings in IE9.

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

    Edit: !important needed to make sure it works in all places.

    0 讨论(0)
  • 误落风尘
    2020-12-15 08:07

    The simplest and most reliable method for filter: compatibility I've found uses the code http://www.colorzilla.com/gradient-editor/ generates: 

    <!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->

    Then you add a gradient CSS class to the element that needs it. And that's it.

    Although conditional comments are still a bit of a hack, in my opinion they're less so than universal selectors or the likes of :not and don't have the performance risks.

    Remember that Microsoft dropped conditional comments from IE10 and above, but you should almost never need them for those versions.

    I wouldn't trust IETester either; download a virtual machine with proper IE9 on from https://www.modern.ie/en-gb - it's free; all you need is time and disk space (keep the original download so when it expires you can just reinstall.)

    0 讨论(0)
 看不清?
提交回复
热议问题