Question

我对CSS Pie和iE8有一个奇怪的问题，其中Pie正确地将border-radius属性应用于元素，但元素的背景（渐变或平面颜色）溢出边框并且看起来像是在顶部，隐藏实际元素。

我一直在使用Pie CSS。我知道在PHP环境中使用它时，需要使用pie.php，并且Pie的正确位置位于站点的根目录。我从来没有遇到过这个问题，但现在我正在使用响应式框架我有这个问题。我们用这种结构制作的按钮：

<p class="btn">
  <a href="#">Learn More</a>
</p>

CSS：

.btn {

    position: relative;
    display: inline-block;
    width: auto;
    height: 36px;
    font-size: 16px;
    line-height: 36px !important;
    border: 1px solid #a0c401;
    border-radius: 4px;
    cursor: pointer;
    margin: 0 0 20px 0;
    -webkit-box-shadow: inset 0 1px 1px #fff,
        0 1px 2px rgba(0,0,0,0.31); /* Remove this line if you dont want a dropshadow on your buttons*/
    box-shadow: inset 0 1px 1px #fff,
                0 1px 2px rgba(0,0,0,0.31); /* Remove this line if you dont want a dropshadow on your buttons*/
    background: #c0eb03; /* Old browsers */
    background: -moz-linear-gradient(top, #c0eb03 0%, #a8cd01 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c0eb03), color-stop(100%,#a8cd01)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #c0eb03 0%,#a8cd01 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #c0eb03 0%,#a8cd01 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #c0eb03 0%,#a8cd01 100%); /* IE10+ */
    background: linear-gradient(top, #c0eb03 0%,#a8cd01 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c0eb03', endColorstr='#a8cd01',GradientType=0 ); /* IE6-9 */
    -pie-background: linear-gradient(top, #c0eb03 0%,#a8cd01 100%);
    behavior: url("PIE.php");
    z-index: 10 !important;
}
.btn a, .btn:hover a {
    display: block;
    text-shadow: 0px 1px 1px rgba(199, 243, 6, 1);
    text-transform: uppercase;
    font-family: 'AvantGardeGothicITCW01D 731075';
    padding: 0 20px;
    text-align: center;
    text-decoration: none;
    color: #6a8100;
    text-shadow: 0px 1px 1px rgba(199, 243, 6, 1);
}

Answer 1

过滤器溢出;如果你让PIE通过-pie-background渲染渐变，则不需要它。取下过滤器，一切都应该好。

按钮和饼Css

1 个答案: