在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; 
} 

我在一個方向上旋轉包裝物並沿相反方向旋轉包裝物，然後使用將包裝物切成兩半，實現了「三角」 -div

其在FF，Chrome和Opera

效果很好，但有這個問題在IE9 http://www.screenr.com/ikos

懸停觸發對IE9的內容，即使它將被隱藏包裝

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/