internet-explorer - CSS3Pie 不适用,而是边框消失

标签 internet-explorer css border gradient css3pie

我正在尝试让 CSS3Pie 应用于 div。我需要圆 Angular (包括边框)和背景的线性渐变。我让它与另一个我只需要圆 Angular 的 DIV 一起工作,但是当我将行为 htc 应用到这个 div 时,所有发生的事情都是边框消失了。有什么简单的方法可以解决这个问题吗?

Demo

.productBoxes {
    position: relative;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    background: #efefef; /* Old browsers */
    background: -moz-linear-gradient(top,  #efefef 0%, #efefef 3%, #e6e6e6 6%, #dbdbdb 13%, #d9d9d9 15%, #d4d4d4 17%, #cccccc 28%, #c7c7c7 49%, #c7c7c7 84%, #b8b8b8 92%, #b0b0b0 95%, #b0b0b0 96%, #adadad 96%, #ababab 98%, #a5a5a5 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(3%,#efefef), color-stop(6%,#e6e6e6), color-stop(13%,#dbdbdb), color-stop(15%,#d9d9d9), color-stop(17%,#d4d4d4), color-stop(28%,#cccccc), color-stop(49%,#c7c7c7), color-stop(84%,#c7c7c7), color-stop(92%,#b8b8b8), color-stop(95%,#b0b0b0), color-stop(96%,#b0b0b0), color-stop(96%,#adadad), color-stop(98%,#ababab), color-stop(100%,#a5a5a5)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #efefef 0%,#efefef 3%,#e6e6e6 6%,#dbdbdb 13%,#d9d9d9 15%,#d4d4d4 17%,#cccccc 28%,#c7c7c7 49%,#c7c7c7 84%,#b8b8b8 92%,#b0b0b0 95%,#b0b0b0 96%,#adadad 96%,#ababab 98%,#a5a5a5 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #efefef 0%,#efefef 3%,#e6e6e6 6%,#dbdbdb 13%,#d9d9d9 15%,#d4d4d4 17%,#cccccc 28%,#c7c7c7 49%,#c7c7c7 84%,#b8b8b8 92%,#b0b0b0 95%,#b0b0b0 96%,#adadad 96%,#ababab 98%,#a5a5a5 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #efefef 0%,#efefef 3%,#e6e6e6 6%,#dbdbdb 13%,#d9d9d9 15%,#d4d4d4 17%,#cccccc 28%,#c7c7c7 49%,#c7c7c7 84%,#b8b8b8 92%,#b0b0b0 95%,#b0b0b0 96%,#adadad 96%,#ababab 98%,#a5a5a5 100%); /* IE10+ */
    background: linear-gradient(top,  #efefef 0%,#efefef 3%,#e6e6e6 6%,#dbdbdb 13%,#d9d9d9 15%,#d4d4d4 17%,#cccccc 28%,#c7c7c7 49%,#c7c7c7 84%,#b8b8b8 92%,#b0b0b0 95%,#b0b0b0 96%,#adadad 96%,#ababab 98%,#a5a5a5 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#a5a5a5',GradientType=0 ); /* IE6-9 */    
    width: 100%;
    padding: 0px;
    margin: 0px;
    margin-bottom: 1%;
    border: 1px solid black;
    overflow: hidden;
    behavior: url(/PIE.htc);
}

最佳答案

尝试向元素添加 zoom:1 并给它一个 z-index

关于internet-explorer - CSS3Pie 不适用,而是边框消失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11527196/

相关文章:

css - 如何跨越 CSS 边界

css - IE 中的样式问题

asp.net - 在 asp :repeater i need to repeat the following 中的 vb.net 中重现此内容

CSS3 - div 彼此重叠,边框,三 Angular 形

css - 造型师 CSS 边框创建

javascript - 滚动后如何停止导航栏?

javascript - jquery .change 函数使脚本在 IE 中崩溃

selenium - 如何处理 IE selenium 上的新选项卡?

html - Internet 浏览器 8 : How to make read only text input have no cursor

html - 如何让 CSS 中的无限嵌套列表具有独特的样式?