• 安卓手机微信页面position: fixed位置错误


    今天做项目的时候发现动用position: fixed做弹窗时,用margin-top:50%这样外边距来响应式的控制位置时,在微信里打开页面的弹窗,弹窗在手机上显示的位置和实际上在手机上的位置不一样,让人点击上面时并没有反应,其实他实际位置时在眼睛看到的位置上方许多,点击上方许多的位置时,才触发眼睛看到的地方的元素被点击的事件,这是为毛啊?UC浏览器都是正常的,微信最近更新作死吗,害我调整了好久,最好用top来代替margin-top了

    贴上问题代码

    <div class="pop_bg"></div>
    <div class="pop_content">
        <div class="pop_message">
            <form id="baoming_from" name="" action="">
                <p>请填写您的个人信息</p>
                <ul>
                    <li><label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名:</label><input type="text" name="name" myAttr="姓名"></li>
                    <li><label>联系电话:</label><input type="text"  name="phone"  myAttr="联系电话"></li>
                    <li><input type="button" value="报名" class="baoming_btn"></li>
                </ul>
            </form>
            <div class="baoming_tip">
                <div class="baoming_tip_box"><img src="images/xiaolian.jpg"><span>报名成功</span></div>
                <button value="关闭" class="baoming_close">关闭</button>
            </div>
        </div>
    </div>

    下面CSS

        /*公共弹窗样式*/
        .pop_bg{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #343434; opacity: 0.15; z-index: 9999; display: none;}
        .pop_content{ width: 73.75%; padding-bottom:53.4375%; position: fixed; top: 15%; left: 50%; margin-left: -36.875%; margin-top: 0%;  /*这里的margin-top用top代替了*/ background-color: #fff; z-index: 10000; max-width: 470px; display: none;}
    
    .pop_message p{ text-align: center; margin-top: 10.42%; margin-bottom: 8.94%;}
        #baoming_from{ /*display: none;*/}
        .pop_message li{ margin-bottom: 5.1%;}
        .pop_message label{ width: 33.05%; font-size: 25px; line-height: 1.8; text-align: right; margin-bottom:0; font-weight: 500;}
        .pop_message input{ width: 59.3%; margin-right:7.65%;  line-height: 1.8; border: none; background-color: #f2f2f2; text-indent: 0.5em;}
        #baoming_from .baoming_btn,.baoming_close{ display: block; color: #fff; margin-left: 33.05%; width: 31.915%; background-color: #da2737; line-height: 2; text-align: center; border-radius: 4px;}
        .baoming_tip{ text-align: center; display: none;}
        .baoming_tip_box{ margin-top: 21.28%; margin-bottom: 17.02%;}
        .baoming_tip_box img{ margin-right: 6.8%; width: 15.11%;}
        .baoming_tip_box span{ line-height: 70px;}
  • 相关阅读:
    如何进行数据库设计
    安装mysql后ERROR 2002 (HY000): Can’t connect to local MySQL server through socket ‘/var mysql 启动不了
    Hive介绍、安装(转)
    Hadoop家族 路线图(转)
    Hive学习路线图(转)
    【CF949D】Curfew(贪心)
    【CF912E】Prime Game(meet in the middle)
    【BZOJ3872】Ant colony(二分,动态规划)
    【BZOJ2067】SZN(二分,动态规划,贪心)
    AtCoder Grand Contest 006
  • 原文地址:https://www.cnblogs.com/lichuntian/p/4778861.html
Copyright © 2020-2023  润新知