2011-11-02 4 views
3

나는 클라이언트 용 웹 사이트를 디자인하고이를 위해 만들었습니다. 거의 완료되었습니다 (Chrome 또는 Firefox를 사용하여 보면 완벽합니다).Internet Explorer에서 기울어 진 각도로 div를 렌더링하는 방법

디자인의 일부는 화면 왼쪽 상단에 일각의 폴라로이드 사진을 보여줍니다. Div와 이미지로 구성되어 있습니다. 이 코드는 내부의 이미지가 기울어 진 상태에서 div 기울임을 일정한 각도로 만듭니다.

그러나 코드를 사용 :

transform: rotate(-7deg); 
-webkit-transform: rotate(-7deg); /* Safari and Chrome */ 
-o-transform: rotate(-7deg); /* Opera */ 
-moz-transform: rotate(-7deg); /* Firefox */ 

인터넷 익스플로러의 모든 버전에서 작동하지 않습니다. 클라이언트는 인터넷 익스플로러를 사용하지만 실제로 이런 모습으로 보이기 때문에 슬픔을 안겨줍니다. (이 클라이언트는 전형적인 "폼 오버 기능"타입의 사람입니다.)

각도로 기울여 div를 만들려면 어떻게해야합니까?

편집 : 나는 CssSandpaper 플러그인을 사용했습니다, 그리고 내가이 시점까지 수행하는 데 필요하고있어

.

here 이미지는 필요한만큼 제목이 표시되어 있습니다. 그러나, 내가 사용하고있는 사이클 플러그인에서, 이미지가 변하면 사라지고, 다시 나타납니다. 나는 그것이 무엇을 일으키는 지 모른다.

답변

2

아래의 IE8 &은 rotate 속성을 지원하지 않습니다.

/* IE8+ - must be on one line, unfortunately */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.992546151641322, M12=0.12186934340514761, M21=-0.12186934340514761, M22=0.992546151641322, SizingMethod='auto expand')"; 

    /* IE6 and 7 */ 
    filter: progid:DXImageTransform.Microsoft.Matrix(
      M11=0.992546151641322, 
      M12=0.12186934340514761, 
      M21=-0.12186934340514761, 
      M22=0.992546151641322, 
      SizingMethod='auto expand'); 

& 당신이 생성 할 수 있습니다 여기에서 filter : 그래서, 당신은 IE filter이 시도 matrixfilter

라는 사용해야 나는이 시도했습니다

http://www.useragentman.com/IETransformsTranslator/index.html

+0

을하고, 그것은 요점에 일했습니다. 내가 기울여야 할 div 안의 이미지는 슬라이드 쇼의 일부라고 말했다. 매트릭스 코드를 사용하면 이미지가 기울임없이 렌더링되고 기울어집니다. – mickburkejnr

+0

HTML 및 CSS 코드를 표시 할 수 있습니까? 따라서 원하는 것을 쉽게 이해할 수 있습니다. – sandeep

+0

http://dev.shoutcommunications.co.uk/news - 거기에서 실제로 볼 수 있습니다. – mickburkejnr

관련 문제