2012-05-25 13 views
7

निम्न कोड में हेडर बार, एक पाद लेख बार और एक छवि दिखानी चाहिए, लेकिन किसी कारण से, जैसे ही मैं .div1 { -webkit-transform-style: preserve-3d; } जोड़ता हूं, मुझे केवल हेडर बार मिलता है। मुझे पता है कि ऐसा लगता है कि इसमें कुछ अनावश्यक divs और शैली लागू होती है, लेकिन मुझे उन प्रभावों के लिए आवश्यकता है जिन्हें मैंने डिबगिंग को आसान बनाने के लिए छीन लिया है। मेरे पेज कोड है:"-webkit-transform-style: preserve-3d;" क्यों करता है कुछ divs गायब हो?

<html> 
    <head> 
     <title></title> 
     <style> 
      body { 
       margin: 0px; 
      } 
      .div1 { 
       -webkit-transform-style: preserve-3d; 
      } 
      .div2 { 
       position: absolute; 
       width: 100%; 
       height: 100%; 
      } 
      img { 
       max-width: 50%; 
       max-height: 50%; 
       display: block; 
      }    
      .footer { 
       position: fixed; 
       bottom : 0px; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="div1"> 
      <div class="div2"> 
       <div class="header"> 
        Header 
       </div> 
       <div class="imgdiv"> 
        <img src="http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2012/5/18/1337331092888/Cwm-Idwal-Snowdonia.-Mich-007.jpg"> 
       </div> 
       <div class="footer"> 
        Footer 
       </div> 
      </div> 
     </div> 
    </body> 
</html> 

उत्तर

11

मुझे लगता है कि समस्या यहाँ प्रसिद्ध व्यवहार जहां position: absolute/fixed div के कि एक निर्धारित ऊंचाई/चौड़ाई की जरूरत नहीं है अक्सर गायब हो सकता है के समान है। आपके मामले में, 3 डी कैनवास <div class="div1"> की तलाश में चौड़ाई निर्धारित करने के लिए देख रहा है, अन्यथा यह केवल अंतरिक्ष में बिना किसी स्थान पर तैरता है क्योंकि आपने इसे 3 डी कैनवास का उपयोग करने वाले गुण दिए हैं और मेरा मानना ​​है कि कुछ अप्रत्यक्ष तरीके से यह नहीं होता है बच्चे divs रखने के लिए विस्तार करें।

किसी भी मामले में, आप देख सकते हैं कि preserve-3d फिक्स जे एस बेला में इस मुद्दे के साथ तत्व पर height और width को परिभाषित: http://jsfiddle.net/nY9v6/

+0

कैसे भ्रामक। धन्यवाद – Grezzo

+0

निश्चित बात! यह याद रखना महत्वपूर्ण है कि इन चीजों के लिए कल्पना अभी तक अंतिम नहीं है। यहां तक ​​कि CSS3 एनीमेशन (एक स्पेक जो 3 डी कैनवास से अधिक परिपक्व है) को छोटी गाड़ी मिली है (स्पेस की वजह से, ब्राउज़र कार्यान्वयन के कारण नहीं) और कल्पना जल्द ही बदल जाएगी। – Brian

+0

यह दिलचस्प है, क्या आप किसी भी लेख के बारे में जानते हैं जो कल्पना में बग पर चर्चा करता है? – Grezzo