2012-05-25 24 views
7

Đoạn mã sau sẽ hiển thị thanh tiêu đề, thanh chân trang và hình ảnh, nhưng vì một số lý do, ngay khi tôi thêm .div1 { -webkit-transform-style: preserve-3d; } tôi chỉ nhận được thanh tiêu đề. Tôi biết nó dường như có một số divs không cần thiết và phong cách áp dụng, nhưng tôi cần chúng cho các hiệu ứng mà tôi đã bị loại bỏ để làm cho gỡ lỗi dễ dàng hơn. mã trang của tôi là:Tại sao "-webkit-transform-style: preserve-3d;" làm cho một số div biến mất?

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

Trả lời

11

Tôi nghĩ vấn đề ở đây là tương tự như các hành vi nổi tiếng nơi position: absolute/fixed div rằng không có một chiều cao được xác định/chiều rộng thường có thể biến mất. Trong trường hợp của bạn, canvas 3d đang tìm kiếm <div class="div1"> để có chiều rộng được xác định trên nó, nếu không nó chỉ trôi nổi trong không gian bởi vì bạn đã cho nó thuộc tính sử dụng canvas 3d và tôi tin rằng mở rộng để chứa các div con.

Trong mọi trường hợp, bạn có thể thấy rằng việc xác định heightwidth trên phần tử với preserve-3d sửa chữa các vấn đề trong fiddle JS: http://jsfiddle.net/nY9v6/

+0

Làm thế nào khó hiểu. Thankyou – Grezzo

+0

Chắc chắn rồi! Điều quan trọng cần nhớ là thông số kỹ thuật cho những điều này chưa phải là cuối cùng. Ngay cả CSS3 hình ảnh động (một spec đó là trưởng thành hơn 3d canvas) đã được tìm thấy lỗi (vì spec, không phải vì trình duyệt thực hiện) và spec sẽ thay đổi sớm. – Brian

+0

Thật thú vị, bạn có biết bất kỳ bài viết nào thảo luận về các lỗi trong spec không? – Grezzo

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