0
我正在用Phonegap构建一个Android应用程序。我的屏幕的四角由一个覆盖PNG图像变暗,标记的样子:在Android 4.0中不应用CSS旋转webview
<div id="tl" class="corner"></div>
<div id="tr" class="corner"></div>
<div id="bl" class="corner"></div>
<div id="br" class="corner"></div>
和CSS:
.corner{
background: url('img/corner.png');
position: fixed;
z-index: 5;
width: 120px;
height: 120px;
}
#tl{
top: 0;
left: 0;
}
#tr{
top:0;
right: 0;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
#br{
right: 0;
bottom: 0;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
#bl{
bottom: 0;
left: 0;
-webkit-transform: rotate(270deg);
transform: rotate(270deg);
}
这在所有桌面WebKit浏览器工作完全正常,我的手机(这是运行Android 2.3 .5),所有Android 2.x AVD,但是当我启动4.0 AVD时,图像的旋转会丢失(定位按其应有的方式工作)。这是AVD中的错误,是Android 4中的一个错误,还是我在这里错过了一些东西?任何输入赞赏,谢谢!
这是它应该是什么样子(在2.2 AVD运行):
这是正在发生的事情4.0:
咩!
不幸的是(如果webkit使用非webkit供应商前缀,会很奇怪)。顺便说一句,我认为最后列出非前缀属性是一种好习惯(所以当属性最终标准化时,它会覆盖供应商的前缀属性)。请参阅:http://www.alistapart.com/articles/prefix-or-posthack/ – m90 2012-07-10 08:37:10