css - 如何更改 IE 和 safari 的渐变 css

Question

我在jsp页面实现了一张图片，那个图片在chrome和firefox浏览器中显示，但是在IE9和SAFARI浏览器中不显示，请大家帮帮我。

感谢提前。

这是我的 html 代码:

<div class="dropDown"><span class="custom-dropdown custom-dropdown--white custom-dropdown--small" id="compDrop"  style="width: 150px;float:left;padding-top:10px;padding-bottom:0px;"></span></div>

然后这是我的 CSS 代码:

     <style>
 .custom-dropdown--small {
        font-size: 1.7em;
    }


    .custom-dropdown__select--emerald {
        background-color: #20b390;
        color: #fff;    
    }               

    .custom-dropdown__select--red {
        background-color: #d53a22;
        color: #fff;
    }



        .custom-dropdown__select {
            padding-right: 2.5em; /* accommodate with the pseudo elements for the dropdown arrow */             
            border: 0;
            border-radius: 3px;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;    
        }

        .custom-dropdown::before,
        .custom-dropdown::after {
            content: "";
            position: absolute;
            pointer-events: none;
        }

        .custom-dropdown::after { /*  Custom dropdown arrow */
            content: "\25BC";
            font-size: 0.625em;
            height: 1em;
            line-height: 1;
            margin-right: 7px;
              right: 0.2em;
            top: 50%;

        }

        .custom-dropdown__select[disabled] {
            color: rgba(0,0,0,.3);
        }

        .custom-dropdown.custom-dropdown--disabled::after {
            color: rgba(0,0,0,.1);
        }

        .custom-dropdown--white::before {
            background-color: #DCDCDC;
            border-left: 1px solid rgba(0, 0, 0, 0.1);
            bottom: 0.5em;
            height: 25px;
           margin-right: 1;             
            top: 0.49em;
        }

        .custom-dropdown--white::after {
            color: rgba(0, 0, 0, 0.9);
        }                   


    }

</style> 

以上 css 代码在 chrome 和 Firefox 中运行良好。

Answer 1

IE 9 显然不支持渐变...

那是一篇可能有帮助的帖子 - Gradients in Internet Explorer 9

同时检查.. http://www.briangervais.com/blog/css-gradients-with-internet-explorer-ie6-10