2012-05-25 10 views
7

Poniższy kod powinien zawierać pasek nagłówka, stopkę i obraz, ale z jakiegoś powodu, zaraz po dodaniu .div1 { -webkit-transform-style: preserve-3d; } otrzymuję tylko pasek nagłówka. Wiem, że wydaje się, że niektóre niepotrzebne divy i styl są stosowane, ale potrzebuję ich do efektów, które usunęłam, aby ułatwić debugowanie. Moja strona jest kod:Dlaczego "-webkit-transform-style: preserve-3d;" sprawić, że niektórzy div znikną?

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

Odpowiedz

11

myślę tu problem jest podobny do znanego zachowania gdzie position: absolute/fixed div, że nie mają określoną wysokość/szerokość często może zniknąć. W twoim przypadku, płótno 3D szuka <div class="div1">, aby mieć zdefiniowaną szerokość, w przeciwnym razie po prostu unosi się bez celu w przestrzeni, ponieważ dałeś mu właściwości, które wykorzystują płótno 3d i uważam, że w jakiś pośredni sposób powoduje, że nie rozwiń, aby zawrzeć elementy div dziecka.

W każdym razie, można zobaczyć, że definiowanie height i width na elemencie z preserve-3d rozwiązuje problem w skrzypiec JS: http://jsfiddle.net/nY9v6/

+0

Jak mylące. Dziękuje – Grezzo

+0

Pewnie! Ważne jest, aby pamiętać, że specyfikacja dla tych rzeczy nie jest jeszcze ostateczna. Nawet animacje CSS3 (specyfikacja, która jest bardziej dojrzała niż płótno 3D) zostały uznane za błędne (ze względu na specyfikację, a nie z powodu implementacji przeglądarki), a specyfikacja wkrótce się zmieni. – Brian

+0

To interesujące, czy znasz jakieś artykuły omawiające błędy w specyfikacji? – Grezzo