텍스트 회전 270 도가 IE8에서 작동하지 않습니다.

Question

하나의 레이블 텍스트가 270도 회전 된 슬라이드 메뉴를 만듭니다. Explorers 10 + 9를 포함한 모든 최신 브라우저에서 잘 작동합니다. 하지만 IE8이 이전 IE8 & IE7에서도 작동하도록하고 싶습니다. 그래서 많은 답변에서 권장되는 필터 정의를 추가했으나 작동하지 않습니다. IE8 브라우저로 전환 한 IE 개발자 도구가있는 페이지를 테스트했습니다 (IE8 표준 모드).

여기에 jsfiddle + 입니다.

.menu p.heading { 
    position:absolute; 
    right:-22px; 
    top:3em; 
    -webkit-transform:rotate(-90deg); 
    -moz-transform:rotate(-90deg); 
    -ms-transform:rotate(-90deg); 
    -o-transform:rotate(-90deg); 
    transform:rotate(-90deg); 
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
} 

필터에 따옴표를 추가/제거 시도 CSS는, XHTML하는 HTML5의 문서 타입을 변경,하지만 아무것도 작동하는 것 같다 없습니다. 누군가가 나에게 IE 8 & 7에 맞게 설정하는 방법에 대한 조언을 줄 수 있습니까?

또 하나의 부수적 인 질문 : 두 개의 IE8 관련 정의를 구분 된 태그 as shown here으로 구분할 수있는 이점이 있습니까?

<!--[if lte IE 8]> 
<style type="text/css"> 
.rotation { 
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)"; 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
} 
</style> 
<![endif]--> 

어떤 힌트를 주셔서 감사합니다!

Answer 1

로테이션이 IE8에서 작동하는 것 같습니다. 그러나 회전 된 항목은 잘못 배치되어 있으므로 처음으로 페이지를 볼 때 회전 된 텍스트가 화면 가장자리에서 벗어납니다. 마우스를 가져 가면 상자가 보이게됩니다.

IE8의 filter 스타일은 표준 CSS와는 다른 회전 지점을 가지고 있기 때문입니다. 왼쪽 상단 모서리를 회전 점으로 사용하지만 CSS는 기본값을 중심으로 사용합니다. 같은 지점을 사용하도록 둘 중 하나를 수정해야합니다. 그런 다음 올바르게 배치하면 모든 브라우저에서 동일하게 보입니다.

이것은 실제로 그렇게하기 쉽지 않습니다. IE에서는 복잡한 표준 행렬 필터를 사용해야합니다. 이제는 비교적 쉽게 rotation=3을 사용해야합니다. 따라서 제 추천이 될 것입니다. CSSSandpaper이라는 javascript polyfill을 사용하여 IE8 및 이전 버전에서 표준 CSS 순환을 인식하게하려면 filter을 내부적으로 사용하지만 다른 표준 CSS 변형과 함께 -sand-rotate(-90deg); 만 있으면됩니다.

이렇게하면 코드를 작업하기가 훨씬 쉬워지고 브라우저 전체에서 일관되게 작동합니다.

는 두 번째 질문에 대답하려면 - 당신이 회전을 할 filter를 사용하는 경우 예, 다음은 IE < = 8 특정 블록에서 filter 스타일을 넣어하는 것이 좋습니다 것, 그들이 IE9을 방해하기 때문이다.

IE9는 표준 CSS 회전을 지원하지만 필터와도 작동하므로 IE9에서는 상황이 두 가지로 다가오고 있으므로 완전히 잘못되었습니다. (당신은 그래픽 손상으로 끝나고, 그것은 예쁘지 않다).

그러나 위에서 언급 한대로 CSS 샌드 페이퍼를 사용하는 경우이 점은 사용자가 어떤 IE 버전인지 감지하고 IE9에서 실행되지 않으므로 관련이 없습니다. IE8 관련 스타일 시트가 필요 없습니다.