घूर्णन और स्थिति: पूर्ण (IE8 और निचला)

मुझे इंटरनेट एक्सप्लोरर 8 और निचले भाग में घूर्णन के साथ समस्या है। मैं एक पैरेंट div को घुमाने में सक्षम हूं, लेकिन बच्चा (पूर्ण स्थान पर स्थित) अपने माता-पिता के साथ घूमता नहीं है। जब मैं बच्चे को पूर्ण स्थिति में नहीं रखता, तो यह सही घूर्णन करता है।घूर्णन और स्थिति: पूर्ण (IE8 और निचला)

यहाँ जब आप 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>

है, तो इस परिणाम

enter image description here है

मैं हरी div रूप में एक ही रोटेशन है कि चाहते हैं लाल div

धन्यवाद!

स्रोत

2011-10-17 Vinzcent

जिज्ञासा से बाहर, आप एक div क्यों घूम रहे हैं? मुझे इसके लिए कभी भी उपयोग नहीं मिला है, मैं सिर्फ आपके उद्देश्यों पर उत्सुक हूं। – FreeSnow

मुझे ऐसी साइट बनाना है जो एक prezi प्रस्तुति की तरह दिखता है :)। http://prezi.com/ – Vinzcent

ओह, अच्छा विचार। खैर, शुभकामनाएं :) – FreeSnow

का संभावित हल: किसी भी बच्चे-निरपेक्ष-तैनात तत्व के लिए रोटेशन लागू करने के लिए एक वर्ग का उपयोग करें:

सीएसएस:

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

एचटीएमएल:

<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

आईई 8 में एक बग।

यह इस को हल करने के लिए एक सरल और प्रभावी तरीका है:

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

ऊपर डालने के सिर

स्रोत

2011-10-17 12:30:49 EtherDream

घूर्णन और स्थिति: पूर्ण (IE8 और निचला)

उत्तर

संबंधित मुद्दे