如何更改IE和Safari的渐变css

时间:2014-05-02 11:56:26

标签: css

我在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中运行良好。

1 个答案:

答案 0 :(得分:0)

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

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

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