css - h5开发中安卓和ios的问题-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

css - h5开发中安卓和ios的问题

高洛峰 2017-04-17 13:06:20

[HTML讨论组]

339

请问我在h5开发中发现，代码在安卓里能够很好运行，但是一旦到ios的safari里就会出现排版混乱（几排文字全部挤到顶部去了），检查代码很久没有发现问题，所以求助大家

#page1 > .p1_title p{right: 10%;left: 10%;}
.p1_title_1{bottom: 48%;}
.p1_title_2{bottom: 44%;}
.p1_title_3{bottom: 40%;}
.p1_title_4{bottom: 36%;}
.p1_title_5{bottom: 32%;}
.p1_title_6{bottom: 28%;}

高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。网络人气名人讲师，...

全部回复(2)

PHP中文网2017-04-17 13:08:20 2楼

*{margin: 0;padding: 0;border: none;font-size: 30%;font-family: "Microsoft Yahei";}
html,body{height: 100%; overflow: hidden;}
.page{position: absolute;width: 100%;height: 100%;display: block;transition: .5s;-webkit-transition: .5s;-ms-transition: .5s;}
.logo1{position: absolute;z-index: 2;bottom: -9%;margin: 0;left: 5%;width: 50%;height: 50%;background: url(img/p1_logo1.jpg) no-repeat center center;background-size: 40%;}
.logo2{position: absolute;right: 10%;bottom: -4.0%;width: 40%;height: 40%;margin: 0 auto;background: url(img/p1_logo2.jpg) no-repeat center center;background-size: 50%;}
#page0{z-index: 10}
#page1{z-index: 9}
#page2{z-index: 8}
#page3{z-index: 7}

p{color: #231875;position: absolute;font-size: 4rem;right: 0;left: 0;margin: 0 auto;text-align: center;}

#page0 > .p0_img{z-index: -1;height: 100%;width: 100%;background: url(img/p0_bg.jpg) no-repeat center center;background-size: 100%;}
#page0 #p0_title_1{top: 2%;-webkit-animation:appear 2s linear 1s forwards ;-ms-animation:appear 2s linear 1s forwards ;-moz-animation:appear 2s linear 1s forwards;animation:appear 2s linear 1s forwards;}
#page0 #p0_title_2{top: 7%;-webkit-animation: appear 2s linear 2s forwards;-ms-animation: appear 2s linear 2s forwards;-moz-animation: appear 2s linear 2s forwards;animation: appear 2s linear 2s forwards;}
***@-webkit-keyframes appear{0%{opacity: 0;};100%{opacity: 1;};}
@-ms-keyframes appear{0%{opacity: 0;};100%{opacity: 1;};}
@-moz-keyframes appear{0%{opacity: 0;};100%{opacity: 1;};}
@keyframes appear{0%{opacity: 0;};100%{opacity: 1;};}***

#page1 > .p1_title p{right: 10%;left: 10%;}
.p1_title_1{bottom: 48%;}
.p1_title_2{bottom: 44%;}
.p1_title_3{bottom: 40%;}
.p1_title_4{bottom: 36%;}
.p1_title_5{bottom: 32%;}
.p1_title_6{bottom: 28%;}
#page1 > .p1_content{position: absolute;font-size: 5rem;right: 0; left: 0; top: 20%;text-align: center; color: #231875;z-index: 3;}
#page1 > .p1_img{z-index: -1;height: 100%;width: 100%;background-color: #fff;}

.p2_content > .p2_form{position: absolute;width: 100%;height: 100%;}
.p2_content p{color: #231875;}
.p2_content option{font-size: 5rem;}
.p2_content_p1{top: 15%;}
.p2_content_p2{top: 35%;}
.p2_content_p3{top: 55%;}
.p2_content .form-control{font-size: 4rem;height: 8%;width: 40%;margin-left: 30%;margin-right: 30%;}
.p2_content_s1{margin-top: 40%;}
.p2_content_s2{margin-top: 20%;}
.p2_content_s3{margin-top: 20%;}
#p2_submit{font-size: 2rem;margin-left: 40%;width: 20%;background-color: #CDC6C1;height: 5%;border-radius: 10%;margin-top: 10%;}
#page2 > .p2_img{z-index: -1;height: 100%;width: 100%;background: url(img/p2_bg.jpg); no-repeat center center;background-size: 100%;}