のdivホバーの回転とクリップがIE9

Question

に間違ってトリガされた後、私は次のコードを持っている： http://jsfiddle.net/cosoroaba/nCEwv/

HTML：

<div id="square"> 
    <div class="corner-wrapper"> 
     <div id="ctr"></div> 
    </div> 
</div> 

はCSS：

#square { 
    border: 1px solid #CCCCCC; 
    display: block; 
    height: 400px; 
    line-height: 400px; 
    margin: 50px auto; 
    overflow: hidden; 
    position: relative; 
    text-align: center; 
    width: 400px; 
} 
.corner-wrapper{ 
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
     -ms-transform: rotate(45deg); 
     -o-transform: rotate(45deg); 
      transform: rotate(45deg); 
    clip: rect(0px, 141.421px, 70.7107px, 0px); 
    height: 141.421px; 
    position: absolute; 
    right: -20.7107px; 
    top: -20.7107px; 
    width: 141.421px; 
} 
#ctr{ 
-webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
     -ms-transform: rotate(-45deg); 
     -o-transform: rotate(-45deg); 
      transform: rotate(-45deg); 
    left: 20.7107px; 
    top: 20.7107px; 
    background-color: blue; 
    display: block; 
    height: 100px; 
    position: absolute; 
    width: 100px; 
} 

#ctr:hover{ 
    background-color: green; 
} 

#ctr:active{ 
    background-color: red; 
} 

私は」をラッパーを一方向に、内容物を反対方向に回転させた後、を使用してラッパーを半分に切断するFF、ChromeとOperaの上だけでなく

に動作しますが、この問題は

ホバーがでもそれならばIE9での内容にトリガされたIE9 http://www.screenr.com/ikosであり、「三角形」-div

を達成するために、、ラッパーによって隠されるでしょう

Answer 1

私はあなたのコードをリファクタリングします。不必要な変換が行われています。コンテナのサイズを変更すると、すべてを再計算する必要があります。私はIE9でチェックしていませんが、これは動作するはずです：

<div id="square"> 
     <div id="ctr"></div> 
</div> 

CSS

#square { 
    border: 1px solid #CCCCCC; 
    display: block; 
    height: 400px; 
    line-height: 400px; 
    margin: 50px auto; 
    overflow: hidden; 
    position: relative; 
    text-align: center; 
    width: 400px; 
} 

#ctr{ 
-webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
     -ms-transform: rotate(-45deg); 
     -o-transform: rotate(-45deg); 
      transform: rotate(-45deg); 
    -webkit-transform-origin: 0 0; 
    -moz-transform-origin: 0 0; 
    -ms-transform-origin: 0 0; 
    -o-transform-origin: 0 0; 
    transform-origin: 0 0; 
    right: 0; 
    top: 0; 
    background-color: blue; 
    display: block; 
    height: 150px; 
    position: absolute; 
    width: 100px; 
} 

#ctr:hover{ 
    background-color: green; 
} 

#ctr:active{ 
    background-color: red; 
} 

jsfiddle： http://jsfiddle.net/exKJK/