css - css：IEのテキストの変換（回転）と位置合わせ

Question

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>

score 1 · Accepted Answer

このコードを元のスタイルから削除しました

#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以下のみをサポートするタグの間に配置します

<!--[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>

css - css：IEのテキストの変換（回転）と位置合わせ

1 に答える 1

Related

Reference