3

几天来，我一直在调试我们的网络应用程序，但我不确定是什么导致它在移动 Safari 中崩溃。该应用程序在 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;

我不确定这是否是苹果错误？我有多个绝对定位的元素，没有问题。如果我注释掉这三行（而且只有这三行），该应用程序就可以工作。我已经尝试注释掉我的代码的其他部分并保留这三行，但它不起作用。有人有什么建议吗？？谢谢！

4

1 回答 1

1

这可能是一个错误，但如果不亲眼看到和探索 web 应用程序，就很难说。我会尝试摆弄布局以尝试：

  • 获得相对定位，而不是绝对定位，
  • 在顶部和左侧属性中使用百分比而不是像素，
  • 使用 float:left 或 float:right，使用边距或填充，而不是绝对定位，
  • 在你的其他 CSS 之前应用 CSS 重置/规范化器，比如normalize.css，看看这是否能神奇地解决问题，
  • 或者作为最后的手段，寻找一种不会强迫您在此处使用绝对定位的替代布局。

这些都是在黑暗中拍摄的，但也许它们会有所帮助。

于 2012-12-21T15:19:48.907 回答