css3pie 样式失败 - 不显示任何内容

Question

我正在开发一个使用 css3pie 大幅增加 IE8 支持的网页。您会注意到，该页面有“上传”和“下载”按钮，在现代浏览器中看起来不错。

在带有 css3pie 的 IE8 中，它看起来 几乎 一样好...（仍然缺少嵌入阴影）或至少它曾经如此。我在使用 Chrome 时做了很多编辑，然后又回到了 IE8。大错特错。

在这些编辑过程中的某个地方，我破坏了 css3pie，我尝试了一切我能想到的修复它，但我就是想不通... p>

当它工作时，按钮包含在 <div> 标签中，而不是 <span> 标签中，可能毫无价值（我将其更改为有效的 HTML），尽管将其更改回 <div> 不会修复它。

您知道出了什么问题吗？如果适用，我以后如何避免它？

IE8的失败：

看起来应该是这样的：

（即使使用 css3pie 工作，顶部的白色牛排和白色文本阴影也不会呈现）

CSS 代码：

span.button {
    behavior: url(/css/PIE/PIE.htc);
    display:inline-block;

    color:rgb(38,67,107);
    text-shadow: 0px 1px 0px #FFFFFF;
    font-family: 'Oswald', sans-serif;
    font-size: 140%;

    padding-top:1px;
    padding-bottom:3px;
    padding-left:10px;
    padding-right:10px;

    background-color:rgb(200,225,255);

    background-image: linear-gradient(bottom, rgb(185,209,250) 0%, rgb(200,225,255) 69%);
    background-image: -o-linear-gradient(bottom, rgb(185,209,250) 0%, rgb(200,225,255) 69%);
    background-image: -moz-linear-gradient(bottom, rgb(185,209,250) 0%, rgb(200,225,255) 69%);
    background-image: -webkit-linear-gradient(bottom, rgb(185,209,250) 0%, rgb(200,225,255) 69%);
    background-image: -ms-linear-gradient(bottom, rgb(185,209,250) 0%, rgb(200,225,255) 69%);
    -pie-background: linear-gradient(bottom, rgb(185,209,250) 0%, rgb(200,225,255) 69%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(185,209,250)),
        color-stop(0.69, rgb(200,225,255))
    );

    border:1px solid rgb(120,140,180);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;

    box-shadow: inset 0 2px 4px 0 #FFFFFF;
    -webkit-box-shadow: inset 0 2px 4px 0 #FFFFFF;
    -moz-box-shadow: inset 0 2px 4px 0 #FFFFFF;
}

span.button:hover {
    text-shadow: 0px 1px 0px rgb(242,242,242);
    background-color:rgb(190,213,242);

    background-image: linear-gradient(bottom, rgb(176,199,238) 0%, rgb(190,214,242) 69%);
    background-image: -o-linear-gradient(bottom, rgb(176,199,238) 0%, rgb(190,214,242) 69%);
    background-image: -moz-linear-gradient(bottom, rgb(176,199,238) 0%, rgb(190,214,242) 69%);
    background-image: -webkit-linear-gradient(bottom, rgb(176,199,238) 0%, rgb(190,214,242) 69%);
    background-image: -ms-linear-gradient(bottom, rgb(176,199,238) 0%, rgb(190,214,242) 69%);
    -pie-background: linear-gradient(bottom, rgb(176,199,238) 0%, rgb(190,214,242) 69%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, rgb(176,199,238)),
        color-stop(0.69, rgb(190,214,242))
    );

    border:1px solid rgb(96,112,144);
}

span.button:active {
    box-shadow: inset 0 0 11px 0 rgba(0,0,0,0.2);
    -webkit-box-shadow: inset 0 0 11px 0 rgba(0,0,0,0.2);
    -moz-box-shadow: inset 0 0 11px 0 rgba(0,0,0,0.2);
    background-color:rgb(155,200,232);
}

Answer 1

我怀疑您的问题是此处描述的 z-index 问题：http://css3pie.com/documentation/known-issues/#z-index

简而言之，添加 position:relative 可能会解决它。