我在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中运行良好。
答案 0 :(得分:0)
IE 9显然不支持渐变......
这里说的是一篇可能有帮助的帖子 - Gradients in Internet Explorer 9
同时检查.. http://www.briangervais.com/blog/css-gradients-with-internet-explorer-ie6-10