javascript - css3pie 样式失败 - 什么都不显示

Question

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

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

在这些编辑的某个地方，我破坏了 css3pie，并且我已经尝试了一切我能想到的来修复它，但我就是想不通...

当它起作用时，按钮包含在 <div> 中可能毫无值(value)。标签，而不是 <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 可能会解决这个问题。