CSS3 변환 : 회전; IE9에서
내가 한 디자인에서 수직이어야하는 요소가 있습니다. IE9를 제외한 모든 브라우저에서 작동하도록 CSS가 있습니다. IE7 및 IE8에 필터를 사용했습니다.
progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
그러나 이것은 IE9에서 내 요소를 투명하게 렌더링하는 것처럼 보이며 CSS3 '변환'포 퍼티는 아무것도하지 않는 것 같습니다!
어쨌든 IE9에서 요소를 회전하는 것을 아는 사람이 있습니까?
도움을 주셔서 감사합니다!
W.
표준 CSS3 회전은 IE9에서 작동해야하지만 다음과 같이 공급 업체 접두사를 제공해야한다고 생각합니다.
-ms-transform: rotate(10deg);
베타 버전에서는 작동하지 않을 수 있습니다. 그렇지 않은 경우 현재 미리보기 버전 (미리보기 7)을 다운로드 해보십시오. 이는 베타 버전보다 최신 버전입니다. 테스트 할 베타 버전이 없어서 그 버전인지 아닌지 확인할 수 없습니다. 최종 릴리스 버전은 확실히 지원할 예정입니다.
filterIE9에서 IE 관련 속성이 삭제되었음을 확인할 수도 있습니다 .
[편집]
사람들은 몇 가지 추가 서류를 요청했다. 그들이 말했듯이 이것은 매우 제한적이지만 나는 모든 브라우저에서 다양한 CSS3 기능을 테스트하는 데 유용한 http://css3please.com/ 페이지를 찾았습니다 .
그러나 IE9 미리보기에서이 페이지의 회전 기능을 테스트하면 상당히 충돌이 발생했습니다.
그러나 -ms-transform:rotate()내 테스트 페이지에서 IE9에서 사용하여 몇 가지 독립 테스트를 수행 했으며 제대로 작동합니다. 그래서 내 결론은 기능이 구현되었지만 동적 설정과 관련된 버그가 있다는 것입니다.
브라우저에서 기능이 구현되는 또 다른 유용한 참조 지점은 www.canIuse.com입니다. http://caniuse.com/#search=rotation을 참조하세요 .
[편집]
최근 에 질문과 관련이 있고 일을 더 쉽게 만들 수있는 CSS Sandpaper 라는 해킹에 대해 발견했기 때문에이 오래된 답변을 되살립니다 .
해킹 transform은 IE의 이전 버전에 대한 표준 CSS 지원을 구현합니다 . 이제 CSS에 다음을 추가 할 수 있습니다.
-sand-transform: rotate(10deg);
... filter구문 을 사용하지 않고도 IE 6/7/8에서 작동 합니다. (물론 여전히 뒤에서 필터 구문을 사용하지만 다른 브라우저와 유사한 구문을 사용하기 때문에 관리하기가 훨씬 쉽습니다)
이 시도
<!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>
I also had problems with transformations in IE9, I used -ms-transform: rotate(10deg) and it didn't work. Tried everything I could, but the problem was in browser mode, to make transformations work, you need to set compatibility mode to "Standard IE9".
I know this is old, but I was having this same issue, found this post, and while it didn't explain exactly what was wrong, it helped me to the right answer - so hopefully my answer helps someone else who might be having a similar problem to mine.
I had an element I wanted rotated vertical, so naturally I added the filter: for IE8 and then the -ms-transform property for IE9. What I found is that having the -ms-transform property AND the filter applied to the same element causes IE9 to render the element very poorly. My solution:
If you are using the transform-origin property, add one for MS too (-ms-transform-origin: left bottom;). If you don't see your element, it could be that it's rotating on it's middle axis and thus leaving the page somehow - so double check that.
Move the filter: property for IE7&8 to a separate style sheet and use an IE conditional to insert that style sheet for browsers less than IE9. This way it doesn't affect the IE9 styles and all should work fine.
Make sure to use the correct DOCTYPE tag as well; if you have it wrong IE9 will not work properly.
참고URL : https://stackoverflow.com/questions/4865167/css3-transform-rotate-in-ie9
'development' 카테고리의 다른 글
| {. (0) | 2020.10.14 |
|---|---|
| 이해를 위해 Scala의 유형 불일치 (0) | 2020.10.14 |
| 여러 쉼표로 구분 된 값이있는 return 문 (0) | 2020.10.14 |
| React-Redux : 모든 구성 요소 상태가 Redux Store에 유지되어야 함 (0) | 2020.10.14 |
| MATLAB에서 n 차원 행렬의 각 요소를 어떻게 반복합니까? (0) | 2020.10.14 |