css: преобразование текста (поворот) и выравнивание положения для IE

IE заворачивает меня как обычно;)css: преобразование текста (поворот) и выравнивание положения для IE

Любые идеи, что я делаю неправильно? Я просто хочу, чтобы он выглядел одинаково в IE 7,8,9, поскольку он выглядит в хромированном/сафари/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>

источник

2012-06-22 Anonymous

Я удалил этот код из оригинального стиля

#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>

источник

2012-06-22 14:02:51 Mossawi

Невозможно использовать условными. Ограничение cms :( –

Aww thats kinda! @ # $ #! @ # Я пытаюсь подумать о другом решении сегодня. – Mossawi

не волнуйтесь, я понял, используя встроенные css-хаки для целевых браузеров. –

css: преобразование текста (поворот) и выравнивание положения для IE

ответ

Смежные вопросы