1

IE 像往常一样让我发疯；）

任何想法我做错了什么？我只是希望它在 IE 7、8、9 中看起来与在 chrome/safari/ff 中看起来一样

有这方面经验的请帮忙！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WSM</title>

<style>
#video-self-made-label-1 {
    background: url("label_1.png") no-repeat scroll 0 0 transparent;
    bottom: 0;
    display: block;
    height: 34px;
    position: fixed;
    text-decoration: none;
    width: 200px;
}
#video-self-made-label-1 span {
    border-radius: 0 6px 0 0;
    display: block;
    font: bold 14px/34px Arial;
    margin: 0 0 0 37px;
    text-align: center;
}
#video-self-made-label-2 {
    background: url("label_2.png") no-repeat scroll 0 0 transparent;
    top: 0;
    display: block;
    height: 34px;
    position: fixed;
    text-decoration: none;
    width: 200px;
}
#video-self-made-label-2 span {
    border-radius: 0 0 6px 0;
    display: block;
    font: bold 14px/34px Arial;
    margin: 0 0 0 37px;
    text-align: center;
}
#video-self-made-label-3 {
    background: url("label_3.png") no-repeat scroll 0 bottom transparent;
    right: 0;
    display: block;
    width: 34px;
    position: fixed;
    text-decoration: none;
    height: 200px;
    top: 120px;
}
#video-self-made-label-3 span {
    -moz-transform: rotate(-90deg);
    -moz-transform-origin: 0 0;
    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin: 0 0;
    -ms-transform: rotate(-90deg);
    -ms-transform-origin: 0 0;
    -o-transform: rotate(-90deg);
    -o-transform-origin: 0 0;
    transform: rotate(-90deg);
    transform-origin: 0 0;
    border-radius: 0 6px 0 0;
    bottom: 3px;
    display: block;
    font: bold 14px/34px Arial;
    position: absolute;
    text-align: center;
    width: 150px;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
#video-self-made-label-4 {
    background: url("label_4.png") no-repeat scroll 0 0 transparent;
    left: 0;
    display: block;
    width: 34px;
    position: fixed;
    text-decoration: none;
    height: 200px;
    top: 120px;
}
#video-self-made-label-4 span {
    -moz-transform: rotate(90deg);
    -moz-transform-origin: 0 0;
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: 0 0;
    -ms-transform: rotate(90deg);
    -ms-transform-origin: 0 0;
    -o-transform: rotate(90deg);
    -o-transform-origin: 0 0;
    transform: rotate(90deg);
    transform-origin: 0 0;
    border-radius: 0 6px 0 0;
    display: block;
    font: bold 14px/34px Arial;
    left: 34px;
    position: absolute;
    text-align: center;
    top: 37px;
    width: 150px;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
</style>

</head>
<body>


<a id="video-self-made-label-1" href="#"><span style="background-color: #CCCCCC; color: #FFFFFF;">Video Self Made</span></a>
<a id="video-self-made-label-2" href="#"><span style="background-color: #CCCCCC; color: #FFFFFF;">Video Self Made</span></a>
<a id="video-self-made-label-3" href="#"><span style="background-color: #CCCCCC; color: #FFFFFF;">Video Self Made</span></a>
<a id="video-self-made-label-4" href="#"><span style="background-color: #CCCCCC; color: #FFFFFF;">Video Self Made</span></a>


</body>
</html>
4

1 回答 1

1

我从您的原始样式中删除了此代码

#video-self-made-label-3 span {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

#video-self-made-label-4 span {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

并将其放在仅支持 IE8 或 LOWER 的标签之间

<!--[if lt IE 9]>
    <style>

    #video-self-made-label-3 span {
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }

    #video-self-made-label-4 span {
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
        left: 0px !important;
    }

    </style>
<![endif]-->

这是完整的代码，希望对您有所帮助！

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WSM</title>

<style>
#video-self-made-label-1 {
    background: url("label_1.png") no-repeat scroll 0 0 transparent;
    bottom: 0;
    display: block;
    height: 34px;
    position: fixed;
    text-decoration: none;
    width: 200px;
}
#video-self-made-label-1 span {
    border-radius: 0 6px 0 0;
    display: block;
    font: bold 14px/34px Arial;
    margin: 0 0 0 37px;
    text-align: center;
}
#video-self-made-label-2 {
    background: url("label_2.png") no-repeat scroll 0 0 transparent;
    top: 0;
    display: block;
    height: 34px;
    position: fixed;
    text-decoration: none;
    width: 200px;
}
#video-self-made-label-2 span {
    border-radius: 0 0 6px 0;
    display: block;
    font: bold 14px/34px Arial;
    margin: 0 0 0 37px;
    text-align: center;
}
#video-self-made-label-3 {
    background: url("label_3.png") no-repeat scroll 0 bottom transparent;
    right: 0;
    display: block;
    width: 34px;
    position: fixed;
    text-decoration: none;
    height: 200px;
    top: 120px;
}
#video-self-made-label-3 span {
    -moz-transform: rotate(-90deg);
    -moz-transform-origin: 0 0;
    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin: 0 0;
    -ms-transform: rotate(-90deg);
    -ms-transform-origin: 0 0;
    -o-transform: rotate(-90deg);
    -o-transform-origin: 0 0;
    transform: rotate(-90deg);
    transform-origin: 0 0;
    border-radius: 0 6px 0 0;
    bottom: 3px;
    display: block;
    font: bold 14px/34px Arial;
    position: absolute;
    text-align: center;
    width: 150px;
}
#video-self-made-label-4 {
    background: url("label_4.png") no-repeat scroll 0 0 transparent;
    left: 0;
    display: block;
    width: 34px;
    position: fixed;
    text-decoration: none;
    height: 200px;
    top: 120px;
}
#video-self-made-label-4 span {
    -moz-transform: rotate(90deg);
    -moz-transform-origin: 0 0;
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: 0 0;
    -ms-transform: rotate(90deg);
    -ms-transform-origin: 0 0;
    -o-transform: rotate(90deg);
    -o-transform-origin: 0 0;
    transform: rotate(90deg);
    transform-origin: 0 0;
    border-radius: 0 6px 0 0;
    display: block;
    font: bold 14px/34px Arial;
    left: 34px;
    position: absolute;
    text-align: center;
    top: 37px;
    width: 150px;
}
</style>

<!--[if lt IE 9]>
<style>

#video-self-made-label-3 span {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

#video-self-made-label-4 span {
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    left: 0px !important;
}

</style>
<![endif]-->

</head>
<body>


<a id="video-self-made-label-1" href="#"><span style="background-color: #CCCCCC; color: #FFFFFF;">Video Self Made</span></a>
<a id="video-self-made-label-2" href="#"><span style="background-color: #CCCCCC; color: #FFFFFF;">Video Self Made</span></a>
<a id="video-self-made-label-3" href="#"><span style="background-color: #CCCCCC; color: #FFFFFF;">Video Self Made</span></a>
<a id="video-self-made-label-4" href="#"><span style="background-color: #CCCCCC; color: #FFFFFF;">Video Self Made</span></a>


</body>
</html>
于 2012-06-22T14:02:51.953 回答