css：转换IE的文本（旋转）和位置对齐

时间：2012-06-22 13:49:54

标签： css css-transforms

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>

1 个答案:

答案 0 :(得分：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>
相关问题
最新问题