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

在带有css3pie的IE8中,它看起来几乎和以前一样好(仍然缺少嵌入阴影)或至少它曾经使用过。使用Chrome时,我做了很多编辑,然后又回到了IE8。大错。

在进行这些修改的某个地方,我弄断了css3pie,并且尝试了所有可以想到的方法来修复它,但我只是想不通...

当它工作时,按钮包含在<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);
}

最佳答案

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

简而言之,增加相对位置可能会解决它。

关于javascript - css3pie样式失败-不显示任何内容,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/9834373/

10-11 05:54