css - h5开发中安卓和ios的问题
高洛峰
高洛峰 2017-04-17 13:06:20
[HTML讨论组]

请问我在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中文网

*{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%;}
大家讲道理

把html贴出来,还有就是去看看,top,right,bottom,left这些元素什么情况下生效,你是不是得给设置这些属性的元素定位啊

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号