3

ここ数日、Web アプリのデバッグに取り組んでいますが、モバイル サファリでクラッシュする原因がわかりません。このアプリは iPad2 では素晴らしく動作しますが、何らかの理由で iPad3 ではクラッシュします。コードのすべての部分をコメントアウトしましたが、問題のように見えるのは、要素の絶対配置です。これがセクションの私のコードです。

.page .main-content .study-bo {
   background: #F4F4F4;
   border-top: 1px solid #D1D1D1;
   border-bottom: 1px solid #D1D1D1;
   width: 644px;
   position: absolute;
   top: 501px;
   left: 0px;
   padding: 30px 40px;
   z-index:500;
   -webkit-transition: top .5s ease-in-out;
}   
.page .main-content .study-bo .text {
    width: 100%;
    height: 100%;
    position: relative;
    left:auto;
}
.page .main-content .study-bo p {
   font-family: "FrutigerRoman";
   font-size: 12px;
   color: #000000;
   margin-bottom: 15px;
}
.page .main-content .study-bo .study-design {
   width: 92px;
   height: 20px;
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(199, 199, 199, 1)), color-stop(100%,rgba(167, 167, 167, 1)));
   -webkit-border-radius: 5px 5px 0px 0px;
   border: 1px solid #999;
   font-family: "FrutigerItalic";
   font-size: 13px;
   color: white;
   text-shadow: 1px 1px 0px #8E8E8E;
   filter: dropshadow(color=#8e8e8e, offx=1, offy=1);
   text-align: center;
   padding-top: 4px;
   -webkit-box-shadow: inset 0px 1px 0px 0px #e5e4e4;
   position: absolute;
   top: -26px;
   font-style: italic;
   z-index: 50;
   left: 44px;
}
.page .main-content .study-bo .study-design .btn.active {
   background: #6c6a6a;
   text-shadow: 1px 1px 0px #434343;
   filter: dropshadow(color=#434343, offx=1, offy=1);
   -webkit-box-shadow: inset 0px 1px 0px 0px #9e9d9d;
}

アプリをクラッシュさせているコードの部分は次のとおりです。

   position: absolute;
   top: 501px;
   left: 0px;

これがアップルのバグかどうかわかりませんか？複数の要素を問題なく絶対配置しています。この 3 行 (およびその 3 行のみ) をコメントアウトすると、アプリは機能します。コードの他のセクションをコメントアウトして、これらの 3 行をそのままにしてみましたが、うまくいきません。誰にも提案はありますか?? ありがとうございました！

4

1 に答える 1

1

バグの可能性もありますが、Webアプリを直接見て調べなければ、言うのは難しいです。私は次のことを試みるためにレイアウトをいじろうとします：

  • 絶対的なものではなく、相対的なポジショニングを機能させる
  • 上部と左側の属性でピクセルの代わりにパーセンテージを使用して、
  • 絶対位置の代わりに、余白またはパディングを使用して、float：leftまたはfloat：rightを操作します。
  • normalize.cssなどの他のCSSの前にCSSリセット/ノーマライザーを適用して、問題が魔法のように修正されるかどうかを確認します。
  • または最後の手段として、ここで絶対測位を使用することを強制しない代替レイアウトを調べてください。

これらはすべて暗闇の中でのショットですが、おそらく役立つでしょう。

于 2012-12-21T15:19:48.907 に答える