7
Der folgende Code sollte eine Kopfzeile, eine Fußzeile und ein Bild zeigen, aber aus irgendeinem Grund, sobald ich .div1 { -webkit-transform-style: preserve-3d; } hinzufügen, erhalte ich nur die Kopfzeile. Ich weiß, dass es scheint, dass einige unnötige Divs und Stil angewendet, aber ich brauche sie für Effekte, die ich ausgestrichen habe, um das Debuggen einfacher zu machen. Meine Seite Code ist:Warum "-webkit-transform-style: preserve-3d;" einige Divs verschwinden lassen?
<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>
Wie verwirrend. Danke – Grezzo
Sicher Ding! Es ist wichtig daran zu denken, dass die Spezifikationen für diese Dinge noch nicht endgültig sind. Sogar CSS3-Animationen (eine Spezifikation, die reifer ist als 3D-Canvas) wurden als fehlerhaft gefunden (wegen der Spezifikation, nicht wegen der Browser-Implementierung) und die Spezifikation wird sich bald ändern. – Brian
Das ist interessant, weißt du von irgendwelchen Artikeln, die die Fehler in der Spezifikation besprechen? – Grezzo