Xoay và vị trí: tuyệt đối (IE8 và thấp hơn)

Tôi gặp sự cố với xoay vòng trong Internet Explorer 8 trở xuống. Tôi có thể xoay một div cha mẹ, nhưng đứa trẻ (vị trí tuyệt đối) không quay với cha mẹ của nó. Khi tôi không định vị đứa trẻ tuyệt đối, nó xoay vòng đúng.Xoay và vị trí: tuyệt đối (IE8 và thấp hơn)

Đây là mã của tôi

<!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>

Khi bạn xem mã này trong IE8, thì đây là kết quả

enter image description here

Tôi muốn rằng div xanh có vòng quay tương tự như đỏ div.

Cảm ơn!

Nguồn

2011-10-17 Vinzcent

Chỉ vì tò mò, tại sao bạn xoay một div? Tôi đã không bao giờ tìm thấy một sử dụng cho nó, tôi chỉ tò mò về động cơ của bạn. – FreeSnow

Tôi phải tạo một trang web trông hơi giống một bản trình bày prezi :). http://prezi.com/ – Vinzcent

Ồ, ý tưởng hay. Vâng, chúc may mắn :) – FreeSnow

Một cách giải quyết: sử dụng một lớp học để áp dụng luân chuyển tới bất kỳ phần tử con tuyệt đối ở vị trí:

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>

Nguồn

2011-10-17 12:31:13 achairapart

Điều này làm việc, nhưng vị trí của đứa trẻ với cha mẹ không giống như khi không có luân phiên. – Vinzcent

thêm 'chỉ mục z' với bất kỳ giá trị nào cho phụ huynh nên khắc phục sự cố. Tìm thấy ở đây: http://stackoverflow.com/questions/3055383/dximagetransform-matrix-absolutely-position-child-elements-not-rotating-in-ie-8/6268206#6268206 – achairapart

-1

lỗi trong IE8.

Đây là một cách đơn giản và hiệu quả để giải quyết việc này:

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

chèn ở trên để đầu

Nguồn

2011-10-17 12:30:49 EtherDream

Xoay và vị trí: tuyệt đối (IE8 và thấp hơn)

Trả lời

Các vấn đề liên quan