1. 首頁
  2. 問答
  3. CSS3安卓手機版問題

CSS3安卓手機版問題

2013-10-03 60 views
0

在此之前，是的，我一直在尋找，我什麼也沒找到。我在一個應用程序使用HTML/css3與類固醇和phonegap的工作。正如我readed，Android不支持硬件加速JavaScript動畫。它使用任何CSS動畫的唯一方法。我已經成功地使用了translate3d，並且它的動畫非常流暢，但是我用一個問題來解決問題。整個內容得到一個邊緣推到左上角。它的一條小線，但它真的很討厭我，我真的很想刪除它。我真的在這裏困惑，我會真正apreciate任何幫助或任何線索。非常感謝花時間來解碼我的信息:)（我不是一個母語爲英語的人）。動畫之前CSS3安卓手機版問題

http://imageshack.us/a/img266/92/3m50.png http://imageshack.us/a/img96/46/hu8t.png

第一圖像其。第二，之後。在第二張圖片中，由於標題元素和背景具有相同的顏色，因此無法在頁面頂部看到我正在討論的邊框。但它仍然存在！非常感謝！

編輯

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

它也恰好與translate3d！

編輯

我已經發現它給出了什麼左邊界。當我使用jQuery的移動問題發生，但是當它沒有加載它不。但仍然無法找出原因！

來源

2013-10-03 user2844224

+0

顯示html和javascript –

+0

編碼的代碼。無論如何，發現問題的jQuery的移動。 – user2844224

回答

0

它似乎消除jQuery的移動做伎倆。相反，即時通訊用於滑動事件hammer.js，以防任何人進入相同的問題;）

來源

2013-10-04 15:25:17 user2844224

相關問題

 相關問題