IE에서 라인 회전

Question

IE8에서이 라인 회전을 어떻게 만들 수 있습니까? 나는

가 여기에 JSFIDDLE입니다 있습니다 .. MS-필터를 얻을하지만 여전히 일을 못해하는 this을 사용했다.

을 heres HTML :

<div class="mainmenu"> 
    test 
</div> 

와 CSS : 어떤 도움이 크게 감사

.mainmenu:before { 
    background: none repeat scroll 0 0 #333333; 
    content: ""; 
    display: block; 
    height: 1px; 
    position: relative; 
    right: 12.5%; 
    transform: rotate(-45deg); 
    width: 35%; 
    z-index:10000; 

    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=0.7071067811865467, M21=-0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')"; 
} 

.. 감사합니다

Answer 1

IE8 표준 CSS3 회전을 지원하지 않지만, 그것은 동일한 일을 할 수있는 -ms-filter 스타일을 가지고 있습니다 (훨씬 더 복잡한 syn 일지라도). 세금, 성가신 경고).

그러나 약간의 자바 스크립트를 사용할 준비가되어 있다면 이전 버전의 IE에도 표준 CSS rotate 구문을 사용할 수있는 좋은 polyfill 스크립트를 사용하는 것이 좋습니다.

회전에 대해 알고있는 최상의 polyfill 스크립트는 CSS Sandpaper입니다.

이것은 (거의) 표준 CSS 코드를 사용할 수 있음을 의미합니다. 즉, (1) 코드가 브라우저간에 일관되고 따라서 유지 관리가 쉽고 (2) 끔찍한 것을 배울 필요가 없음을 의미합니다 -ms-filter 구문입니다. 그래서 대신 -ms-filter 코드의

, 당신은 다음과 같이 보입니다 줄 거라고 : rotate 외에도

-sand-transform: rotate(-45deg); 

는, CSS 사포는 오래된 IE 버전으로 다른 CSS3 다양한 효과를 구현

을하는 매우 유용한 도구가됩니다.

희망이 있습니다.

Answer 2

transform: rotate(45deg); /* CSS3 (for when it gets supported) */ 
    -moz-transform: rotate(45deg); /* FF3.5+ */ 
    -o-transform: rotate(45deg); /* Opera 10.5 */ 
    -webkit-transform: rotate(45deg); /* Saf3.1+, Chrome */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */ 
    filter: progid\:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */