Android CSS3安卓电话缺口问题
在任何事情之前，是的，我一直在寻找，但什么也没找到。我在一个应用程序中使用html/css3和类固醇和phonegap。正如我所读到的，android不支持硬件加速的javascript动画。唯一的方法是使用任何css动画。我已经成功地在动画中使用了translate3d及其平滑效果，但我遇到了一个问题。整个内容都有一个边距，将其推到左上方。这是一条很小的线，但它确实让我感到不安，我真的很想把它去掉。我在这里真的被绊住了，我真的很感激任何帮助或任何线索。非常感谢您抽出时间来解码我的信息：）（我不是以英语为母语的人） 动画之前的第一个图像。第二，之后。在第二幅图像中，你看不到我所说的页面顶部的边框，因为页眉元素和背景颜色相同。但它仍然在那里！非常感谢 编辑Android CSS3安卓电话缺口问题,android,css,cordova,margin,steroids,Android,Css,Cordova,Margin,Steroids,在任何事情之前，是的，我一直在寻找，但什么也没找到。我在一个应用程序中使用html/css3和类固醇和phonegap。正如我所读到的，android不支持硬件加速的javascript动画。唯一的方法是使用任何css动画。我已经成功地在动画中使用了translate3d及其平滑效果，但我遇到了一个问题。整个内容都有一个边距，将其推到左上方。这是一条很小的线，但它确实让我感到不安，我真的很想把它去掉。我在这里真的被绊住了，我真的很感激任何帮助或任何线索。非常感谢您抽出时间来解码我的信息：）（我不
* {
-webkit点击高亮颜色：rgba（0,0,0,0）；
-webkit点击突出显示颜色：透明；
}
h1、h2、h3、h4、h5{
利润率：2%0px；
}
身体{
边际：0px；
溢出：隐藏；
背景：#4bc0d1；
}
#包装纸{
宽度：100%；
身高：100%；
位置：固定；
左：0px；
顶部：0px；
背景：#4bc0d1；
}
#标题{
宽度：100%；
身高：10%；
最高：1%；
背景：#4bc0d1；
位置：固定；
边距：0xp；
}
.头部要素{
页边顶部：-5px；
浮动：左；
身高：100%；
}
#首先{
宽度：20%；
}
#第一次img{
身高：100%；
}
#第二{
宽度：60%；
利润率最高：2%；
}
#第二次img{
宽度：100%；
}
#第三{
宽度：20%；
}
#第三次img{
身高：100%；
浮动：对；
}
#身体{
宽度：100%；
身高：75%；
位置：固定；
排名前10%；
背景：#e4；
}
#页脚{
身高：15%；
位置：固定；
最高：85%；
背景：黑色；
-webkit转换：-webkit转换0.5s易入易出；
}
#菜单左{
宽度：100%；
身高：100%；
排名前10%；
位置：固定；
左：100%；
z指数：1000；
-webkit转换：-webkit转换0.5s易入易出；
}
#菜单右键{
宽度：100%；
身高：100%；
排名前10%；
左-100%；
位置：固定；
z指数：1000；
-webkit转换：-webkit转换0.5s易入易出；
}
.正文{
宽度：100%；
文本对齐：居中；
颜色：#aaa；
}
.车身按钮{
保证金：0px自动；
身高：40%；
}
#按钮背景{
位置：绝对位置；
宽度：100%；
身高：100%；
z指数：-10；
}
#钮扣{
宽度：96%；
身高：96%；
背景：-莫兹线性梯度（顶部，#f5f6f8 0%，#b9bdc8 100%）；
背景：-webkit渐变（线性、左上、左下、颜色停止（0%、#f5f6f8）、颜色停止（100%、#b9bdc8））；
背景：-webkit线性梯度（顶部，#f5f6f8 0%，#b9bdc8 100%）；
背景：-o-线性梯度（顶部，#f5f6f8 0%，#b9bdc8 100%）；
背景：-ms线性梯度（顶部，#f5f6f8 0%，#b9bdc8 100%）；
背景：线性梯度（至底部，#f5f6f8 0%，#b9bdc8 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#f5f6f8'，endColorstr='#b9bdc8'，GradientType=0）；
边界半径：50%；
盒影：0px 6px 17px rgba（54,50,50,0.73）；
}
.按钮正常{
背景：-moz线性梯度（顶部，rgba（255255255,0）0%，rgba（151152160,1）100%）；
背景：-webkit渐变（线性、左上、左下、颜色停止（0%，rgba（255255255,0））、颜色停止（100%，rgba（151152160,1））；
背景：webkit线性梯度（顶部，rgba（255255255,0）0%，rgba（151152160,1）100%）；
背景：-o-线性梯度（顶部，rgba（255255,0）0%，rgba（151152160,1）100%）；
背景：-ms线性梯度（顶部，rgba（255255255,0）0%，rgba（151152160,1）100%）；
背景：线性梯度（至底部，rgba（255255255,0）40%，rgba（151152160,1）100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#00ffffff'，endColorstr='#9798a0'，GradientType=0）；
}
.按钮悬停{
背景：-莫兹径向梯度（中心，椭圆覆盖，rgba（255255,0）0%，rgba（151152160,1）100%）；/*FF3.6+*/
背景：-webkit渐变（径向，中心，0px，中心，100%，颜色停止（0%，rgba（255255255,0）），颜色停止（100%，rgba（151152160,1））；/*铬，Safari4+*/
背景：-webkit径向梯度（中心，椭圆覆盖，rgba（255255255,0）0%，rgba（151152160,1）100%）；/*Chrome10+，Safari5.1+*/
背景：-o形径向梯度（中心，椭圆覆盖，rgba（255255,0）0%，rgba（151152160,1）100%）；/*Opera 12+*/
背景：-ms径向梯度（中心，椭圆覆盖，rgba（255255255,0）0%，rgba（151152160,1）100%）；/*IE10+*/
背景：径向梯度（中心椭圆，rgba（255255255,0）0%，rgba（151152160,1）100%）；/*W3C*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#00ffffff'，endColorstr='#9798a0'，GradientType=1）；
}
#按钮内部{
宽度：100%；
身高：100%；
盒影：1px37px30pxRGBA（54,50,50,0.29）；
边界半径：50%；
<head>
<link rel="stylesheet" href="vendor/topcoat/css/topcoat-mobile-light.css" />
<link rel="stylesheet" href="stylesheets/application.css" />
<script src="javascripts/onerror.js"></script>
<script src="javascripts/console.log.js"></script>
<!-- cordova.js is served from localhost to ensure the correct version -->
<script src="http://localhost/appgyver/cordova.js"></script>
<script src="components/steroids-js/steroids.js"></script>
<script src="js/jquery.js"></script>
<script src="js/jquery.transit.min.js" ></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
<script src="js/jquery.knob.js"></script>
<plugin name="Notification" value="org.apache.cordova.Notification"/>
<style>
* {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4, h5 {
margin : 2% 0px;
}
body {
margin: 0px;
overflow: hidden;
background : #4bc0d1;
}
#wrapper {
width: 100%;
height: 100%;
position: fixed;
left:0px;
top: 0px;
background : #4bc0d1;
}
#header {
width: 100%;
height: 10%;
top: 1%;
background : #4bc0d1;
position: fixed;
margin: 0xp;
}
.head-element {
margin-top: -5px;
float: left;
height: 100%;
}
#first {
width: 20%;
}
#first img {
height: 100%;
}
#second {
width: 60%;
margin-top: 2%;
}
#second img {
width : 100%;
}
#third {
width: 20%;
}
#third img {
height: 100%;
float:right;
}
#body {
width:100%;
height: 75%;
position:fixed;
top: 10%;
background:#e4e4e4;
}
#footer {
height: 15%;
position:fixed;
top: 85%;
background: black;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
#menu-left {
width: 100%;
height: 100%;
top: 10%;
position:fixed;
left: 100%;
z-index: 1000;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
#menu-right {
width: 100%;
height: 100%;
top: 10%;
left : -100%;
position:fixed;
z-index: 1000;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.body-text {
width:100%;
text-align: center;
color: #aaa;
}
.body_button {
margin: 0px auto;
height: 40%;
}
#button-background {
position: absolute;
width:100%;
height: 100%;
z-index: -10;
}
#button {
width: 96%;
height: 96%;
background: -moz-linear-gradient(top, #f5f6f8 0%, #b9bdc8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f6f8), color-stop(100%,#b9bdc8));
background: -webkit-linear-gradient(top, #f5f6f8 0%,#b9bdc8 100%);
background: -o-linear-gradient(top, #f5f6f8 0%,#b9bdc8 100%);
background: -ms-linear-gradient(top, #f5f6f8 0%,#b9bdc8 100%);
background: linear-gradient(to bottom, #f5f6f8 0%,#b9bdc8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f8', endColorstr='#b9bdc8',GradientType=0 );
border-radius: 50%;
box-shadow: 0px 6px 17px rgba(54, 50, 50, 0.73);
}
.button-normal {
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(151,152,160,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(151,152,160,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(151,152,160,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(151,152,160,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(151,152,160,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 40%,rgba(151,152,160,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#9798a0',GradientType=0 );
}
.button-hover {
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%, rgba(151,152,160,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(151,152,160,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%,rgba(151,152,160,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%,rgba(151,152,160,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 0%,rgba(151,152,160,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(255,255,255,0) 0%,rgba(151,152,160,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#9798a0',GradientType=1 );
}
#button-inner {
width: 100%;
height: 100%;
box-shadow: 1px 37px 30px rgba(54, 50, 50, 0.29);
border-radius: 50%;
}
#dialog {
width:85%;
margin: 5% auto;
border-radius: 30px;
height: 25%;
text-align: center;
}
#dialog-info {
margin:0px auto;
}
#dialog-info div{
float: left;
height:75%;
}
#dialog-info div:first-child{
margin-left:25%;
height: 50%;
}
#dialog-info div:nth-child(2){
margin-left: 5%;
}
#dialog-title {
color: #444
}
.img-height{
height: 100%;
}
#thefixer {
width: 2%;
height: 100%;
position:fixed;
background : #4bc0d1;
}
.onoffswitch {
position: relative; width: 95px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.onoffswitch-checkbox {
display: none
}
.onoffswitch-label {
display: block; overflow: hidden; cursor: pointer;
border: 2px solid #999999; border-radius: 0px;
height: 29px;
}
.onoffswitch-inner {
width: 200%; margin-left: -100%;
-moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
-o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
font-size: 24px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.onoffswitch-inner:before {
content: "Dem";
padding-left: 5px;
background-color: #2FCCFF; color: #FFFFFF;
}
.onoffswitch-inner:after {
content: "Pr";
padding-right: 5px;
background-color: #EEEEEE; color: #999999;
text-align: right;
}
.onoffswitch-switch {
width: 30px; margin: 0px;
background: #FFFFFF;
border: 2px solid #999999; border-radius: 0px;
position: absolute; top: 0; bottom: 0; right: 61px;
-moz-transition: all 0.3s ease-in 0s; -webkit-transition: all 0.3s ease-in 0s;
-o-transition: all 0.3s ease-in 0s; transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
right: 0px;
}
#animation-rotate {
transition: -webkit-transform 0.5s ease-in-out;
}
</style>
<script>
$(document).ready(function(){
$("#animation-rotate").css({
"webkitTransform" : "rotate(-45deg)"
});
});
</script>
</head>
<body style="padding:0px">
<div id="thefixer"></div>
<div id='wrapper' style="margin:0px; padding:0px;">
<div id='header' style="background: #4bc0d1">
<div class='head-element' id='first' >
<img src='images/image-left.png' />
</div>
<div class='head-element' id='second' >
<img src='images/head-image.png' />
</div>
<div class='head-element' id='third' >
<img id="image-notifications" src='images/image-right.png' />
</div>
</div>
<div id='body' >
<div class='body-text' >
<h2 id="textoreloco" >DDAVP</h2>
</div>
<div class='body-text' >
<h3>0,1mg</h3>
</div>
<div class='body_button' style="margin-top:2%">
<div id="red" style="position:absolute; z-index:-10; width: 100%; height: 100%;">
</div>
<div id="green" style="position:absolute; z-index:-10; width: 100%; height: 100%; display : none">
</div>
<div id="skin" style="position:absolute; z-index:-10; width: 100%; height: 100%; display: none">
</div>
<div id='button' style="position:absolute">
<div id="button-inner" class="button-normal" style="">
<div id="Ok" style=" padding-top: 26%; color: #444; ">
<h1 id="button-text" style="text-align: center; font-size: 4em;">Ok</h1>
</div>
</div>
</div>
</div>
<div id="dialog" style="display:none">
<div id="dialog-title">
<h3 id="tittle-text" >Dosis Fuera de Rango</h3>
</div>
<div id="dialog-info">
<div>
<img id="reloj" class="img-height" src="images/reloj_b.png" />
</div>
<div>
<h1 id="time-text">48HS</h1>
</div>
</div>
</div>
</div>
</div>
<div id='footer' style="width:200%; height: 15%">
<div style="width:50%; float: left">
<div style="height:100%; float: left;">
<div id="pPicture" style="height: 70%; padding: 2px; border-radius: 50%; margin-top:16%; margin-left: 13px; background: green">
<div id="animation-rotate" style="height: 100%; position: absolute; z-index: -1">
<div id="doctor-state" style="height:20px; width:20px; border-radius: 50%;
background: green; z-index:-1; margin-left: -2px; margin-top: -2px" ></div>
</div>
<img style="height: 100%;" src="images/profile-picture.png" />
</div>
</div>
<div style="height:100%; width: 65%; float: left">
<h3 style="color: white; margin-top: 4%; margin-left: 2%">Dra. Sibila Vane</h3>
<h4 style="color: #e4e4ff; margin-left: 3%" >Proxima Cita:</h4>
<h5 style="color: white; margin-left: 5%" >18.07.13 / 19:00Hs</h5>
</div>
<div id="footer-plus" style="height:100%; width: 10%; float: left;">
<img style="width:100%; margin-top: 80%;" src="images/mas.png" />
</div>
</div>
<div style="width:50%; float: left; height:100%">
<div id="footer-minus" style="height: 40%; margin-top: 8%; margin-left: 5%; float: left" >
<img style="height: 100%;" src="images/menos.png" />
</div>
<div style="height: 70%; margin-top: 4%; margin-right: 4%; float: right" >
<img style="height: 100%;" src="images/tel.png" />
</div>
<div style="height: 70%; margin-top: 4%; margin-right: 4%; float: right" >
<img style="height: 100%;" src="images/mail.png" />
</div>
<div style="height: 70%; margin-top: 4%; margin-right: 4%; float: right" >
<img style="height: 100%;" src="images/cita.png" />
</div>
</div>
<div style="clear:both" ></div>
</div>