旋轉和位置：絕對值（IE8和更低）

我在Internet Explorer 8及更低版本中出現旋轉問題。我能夠旋轉一個父div，但孩子（絕對定位）不隨其父母旋轉。當我不確定孩子的位置時，它會進行正確的旋轉。旋轉和位置：絕對值（IE8和更低）

這裏是我的代碼

<!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> 
    .parent 
    { 
     background-color: #f00; 
     position: absolute; 
     top: 300px; 
     left: 300px; 
     width: 500px; 
     height: 500px; 

     filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand'); //45deg 
    } 

    .child 
    { 
     background-color: #0f0; 
     position: absolute; 
     top: 150px; 
     left: 150px; 
     width: 300px; 
     height: 300px; 
    } 


</style> 

</head> 

<body> 

<div class="parent"> 
    This is the parent 
    <div class="child"> 
     This is the child 
    </div> 
</div> 



</body> 
</html>

當您在IE8瀏覽這個代碼，那麼這是結果

enter image description here

我想，綠色div有相同的旋轉作爲紅色的div。

謝謝！

來源

2011-10-17 Vinzcent

出於好奇，你爲什麼要旋轉一個div？我從來沒有找到它的用途，我只是好奇你的動機。 – FreeSnow

我必須製作一個網站，看起來有點像Prezi演示:)。 http://prezi.com/ – Vinzcent

哦，很酷的想法。好吧，祝你好運:) – FreeSnow

一種解決方法：使用一個類來旋轉適用於任何兒童絕對定位的元素：

CSS：

.rotate { 
     filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand'); //45deg 
}

HTML：

<div class="parent rotate"> 
    This is the parent 
    <p class="child rotate"> 
     This is the child 
    </p> 
</div>

來源

2011-10-17 12:31:13 achairapart

這是有效的，但孩子對父母的位置與不旋轉時不一樣。 – Vinzcent

添加一個帶有任何值的「z-index」給父母應該解決問題。在這裏找到：http://stackoverflow.com/questions/3055383/dximagetransform-matrix-absolutely-position-child-elements-not-rotating-in-ie-8/6268206#6268206 – achairapart

-1

IE8中的一個錯誤。

這是一個簡單而有效的方法來解決這個問題：上述

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

插入頭

來源

2011-10-17 12:30:49 EtherDream

旋轉和位置：絕對值（IE8和更低）

回答

相關問題