手机UC浏览器 select下拉框内容被遮挡,不能正常显示,求解决。

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了手机UC浏览器 select下拉框内容被遮挡,不能正常显示,求解决。相关的知识,希望对你有一定的参考价值。

<div class="col-xs-10 col-xs-offset-1 form-box"> <div class="form-content"> <form> <div class="form-group"> <label class="sr-only">学校</label> <select class="form-control input-lg" id="school"> <option>选择学校</option> </select> </div> <div class="form-group"> <label class="sr-only">用户名</label> <input type="text" class="form-control input-lg" id="username" placeholder="用户名"> </div> <div class="form-group"> <label class="sr-only">密码</label> <input type="password" class="form-control input-lg" id="password" placeholder="密码"> </div> <div class="checkbox"> <label> <input type="checkbox" id="UserMsg"> 记住密码 </label> </div> <a id="login" class="btn btn-lg btn-primary btn-block">登 录</a> </form> <br> <div class="mesg1 alert alert-danger" role="alert" style="display:none">请选择学校!</div> <div class="mesg2 alert alert-danger" role="alert" style="display:none">用户名或密码不能为空!</div> <div class="mesg3 alert alert-danger" role="alert" style="display:none">用户名或密码错误,请重试!</div> </div> </div> 上面是我的登录部分代码,使用bootstrap写的,手机UC会出现这样的情况,自带浏览器倒是没有问题,求大神点睛!!!

参考技术A 这是uc的bug,针对uc浏览器做点css
hack,比如把输入框的margin改小

layUI 下拉框遮挡

原项目中把layui内置的富文本编辑器替换成了百度的ueditor,但是出现了一点问题,下拉框被遮挡了!

技术分享图片

在网上查询了一些方法,发现最简单的方法就是在当前页面的<head>标签中加入

    <style>
        .layui-form-select dl {
            z-index: 9999;
        }
    </style>

技术分享图片

 

不要问我为什么,因为我也不知道技术分享图片


 

以上是关于手机UC浏览器 select下拉框内容被遮挡,不能正常显示,求解决。的主要内容,如果未能解决你的问题,请参考以下文章

安卓手机底部输入框被软键盘遮挡的坑

layui layer select 选择被遮挡

解决el-select选项被遮挡问题

layui中select下拉框被table的toolbar遮挡

h5手机页面select固定下拉高度

移动端中 H5输入框在弹起键盘后被遮挡