나는 내가 한 디자인에서 수직적이어야 할 요소가 있습니다. IE9를 제외한 모든 브라우저에서이 기능을 사용할 수있는 CSS가 있습니다. 아무것도하지 않는 것CSS3 변형 : 회전; IE9에서
progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
이 그러나 IE9 투명 내 요소와 CSS3 'tranform'porperty를 렌더링하는 것 : 나는 IE7 & IE8에 대한 필터를 사용!
사람은 어쨌든 IE9의 요소를 회전 알고 있나요?
정말 도움을 주셔서 감사합니다!
W.
표준 CSS3의 회전은 IE9에서 작동합니다,하지만 난 당신이 그것을 공급 업체 접두사를 제공과 같이 할 필요가 믿는 :
-ms-transform: rotate(10deg);
그것이 작동하지 않을 가능성이 있습니다 베타 버전; 그렇지 않은 경우 베타 버전의 최신 개정판 인 현재 미리보기 버전 (미리보기 7)을 다운로드하십시오. 테스트 할 베타 버전이 없으므로 해당 버전에 있는지 여부를 확인할 수 없습니다. 최종 릴리스 버전은 확실히 지원 될 예정입니다.
나는 또한 IE 특정 filter 속성은 IE9에서 삭제 된 것을 확인할 수 있습니다.
[편집]
사람들은 추가 문서를 요청했습니다. 그들이 말했듯이, 이것은 매우 제한적이지만, 나는이 페이지를 찾았습니다 : http://css3please.com/ 이것은 모든 브라우저에서 다양한 CSS3 기능을 테스트하는데 유용합니다.
그러나 IE9 미리보기에서이 페이지의 회전 기능을 테스트
은 상당히 화려 충돌을 일으켰습니다. 그러나 나는 내 자신의 테스트 페이지에서 IE9에서-ms-transform:rotate()를 사용하여 몇 가지 독립적 인 테스트를 수행 한, 그리고 그것을 잘 작동합니다. 따라서 필자의 결론은이 기능이 구현되었지만 동적으로 설정하는 것과 관련된 버그가 있다는 것입니다. 기능이있는 구현하는 또 다른 유용한 기준점 브라우저를
는 www.canIuse.com입니다 - 해킹이 CSS Sandpaper 전화에 대해 내가 최근에 발견하기 때문에 http://caniuse.com/#search=rotation
[편집]
볼이 오래된 대답을 부흥하는 질문과 관련이 있으며 일을 더 쉽게 할 수 있습니다.
해킹은 IE의 이전 버전에 대한 표준 CSS transform에 대한 지원을 구현합니다.
-sand-transform: rotate(10deg);
을 ... 그리고 그것은 filter 구문을 사용하지 않고, IE 6/7/8에서 작업 한 : 그래서 지금 당신은 당신의 CSS에 다음을 추가 할 수 있습니다. (물론 뒤에서 필터 구문을 사용하지만 다른 브라우저와 비슷한 구문을 사용하기 때문에 관리하기가 훨씬 쉽습니다.)
또한 IE9에서 변환에 문제가있어서 -ms-transform: rotate(10deg)을 사용했지만 그렇지 않았습니다. 일하지 마라. 내가 할 수있는 모든 것을 시도했지만 브라우저 모드에서 문제가 발생하여 변환 작업을 수행하려면 호환성 모드를 "Standard IE9"로 설정해야합니다.
ie에서 f12를 누르고 브라우저 모드를 ie-9로 변경 한 다음 작동하는지 확인하십시오 ... –
IE9가 세로 텍스트로 작업하려면, 파일의 처음 두 줄을 다음과 같이 사용하여 버크 모드를 해제해야합니다 :' ' ' ' – GlenPeterson
유효한 Doctype은 단점 모드를 비활성화해야합니다 (예 : ). 브라우저 모드는 설정을 변경하지 않는 한 기본적으로 IE9 여야합니다. – superluminary
이
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
margin-left: 50px;
margin-top: 50px;
margin-right: 50px;
margin-bottom: 50px;
}
.rotate {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
-sand-transform: rotate(10deg);
display: block;
position: fixed;
}
</style>
</head>
<body>
<div class="rotate">Alpesh</div>
</body>
</html>
나는이 코드를 ie9, FireFox, Chrome, Safari 및 그것의 작업으로 시도한다. –
내가이 오래 알고 시도하지만이 같은 문제가 발생하고,이 게시물을 발견하고 잘못을 정확하게 설명하지 않았지만, 그것은 정답에 저를 도와 - 그래서 내 대답은 내 문제와 비슷한 문제를 겪고있는 다른 사람들을 돕는다.
필자는 수직으로 회전하기를 원했기 때문에 자연스럽게 필터를 추가했습니다. IE8의 경우, IE9의 경우 -ms-transform 속성. 내가 찾은 것은 -ms-transform 속성과 같은 요소에 적용된 필터를 사용하면 IE9가 요소를 매우 잘못 렌더링하게된다. 내 솔루션 :
당신은 변환 - 원산지 속성을 사용하는 경우, (: 왼쪽 하단 -ms-변환 - 기원)도 MS 하나를 추가 할 수 있습니다. 요소가 보이지 않으면 중간 축이 회전하여 페이지를 어떻게 든 떠날 수 있습니다. 따라서 두 번 확인하십시오.
IE7 & 8 필터를 별도의 스타일 시트로 이동하고 IE 조건부를 사용하여 IE9 미만의 브라우저에 해당 스타일 시트를 삽입하십시오. 이 방법은 IE9 스타일에 영향을주지 않으며 모두 잘 작동합니다.
올바른 DOCTYPE 태그도 사용해야합니다. IE9가 잘못 작동하면 제대로 작동하지 않습니다.
'-ms-transform-origin'에 좋은 호출이있다. 그게 내 머리를 한동안 긁어 주었다. – danwild
감사합니다. 나는 지금 그것을 확인하고 그것에 관해 당신에게 돌아갈 것이다. 이 온라인에 관한 문서가 얼마나 적 었는지 믿을 수 없었습니다. – wilsonpage
@ Spudley 출처를 게시 할 수 있습니까? MSDN에서 찾을 수 없습니다. http://msdn.microsoft.com/en-us/library/ms531207(v=vs.85).aspx –
@ Šime Vidas 및 @pagewil - 맞습니다. 주위에 문서. 나는 그것이 회전 속성을 사용하려고 할 때 IE9 미리보기의 나의 사본을 추락 시켰음을주의해야하지만, 여기에 문서화 된 것을 발견했다 : http://css3please.com/. 그러나, 내 자신의 독립적 인 테스트는 속성이 작동하는지 확인했습니다. 접두사 접두어는 제가 답변에서 인용 한 것입니다. (충돌이 주어지면 여전히 버그가있는 것 같아요!) – Spudley