CSS3Pie 不适用，而是边框消失答案

【问题标题】：CSS3Pie doesn't apply, instead border disappearsCSS3Pie 不适用，而是边框消失
【发布时间】：2012-07-17 16:51:56
【问题描述】：

我正在尝试让 CSS3Pie 应用于 div。我需要圆角（包括边框）和背景的线性渐变。我让它与另一个我只需要圆角的 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);
}

【问题讨论】：

你会做一个小提琴吗？顺便说一句，不需要-webkit-border-radius，PIE 可以为您提供线性渐变 - -pie-background: linear-gradient...（并删除过滤器）。
如何使用 .htc 来做到这一点？我不相信我可以从外部服务器访问这些，可以吗？
我不确定您对 CSS3Pie 了解多少，但您是否看到以下行为：url(/PIE.htc);这是一个仅从服务器下载的 IE 文件，以便在 IE 中正确呈现页面。我可以在 jsfiddle 中加载大部分内容，但我认为这部分服务不会起作用。
如果你从你的服务器加载它可以工作吗？

标签： internet-explorer css border gradient css3pie

【解决方案1】：

尝试将 zoom:1 添加到元素并为其指定 z-index

【讨论】：

我试过你的建议，但它似乎并没有解决它。如果它是相对的，我不应该需要 z-index 吗？
@Lethjakman 我们尝试使用z-index 和zoom 调用hasLayout 属性...如果你给它position:relative; 会受到影响吗？ @Uuid 我很高兴它对你有用。