div绝对定位针对手机浏览器的区别
最近在对ipad和安卓平板做测试,发现我自己写的一个下拉控件在安卓浏览器里面被遮盖了,但是PC或者ipad都没有这个现象,一开始以为是z-index 可是无论我调多少都没有用,研究了好久,发现是代码的位置问题
首先我们看下效果图
在电脑上我用的是IE

在安卓浏览器我用的是QQ浏览器(HD)

可以发现,安卓上面被遮挡了
原因就是我把mydiv1放在外层inputdiv_1的里面
代码:
<div id="inputdiv_1">
<input id="price_1" name="price_1" value="" autocomplete="off" onfocus="GetBuyPrice(this)" onblur="InputValue(this);SumMoeny();">
<div id="mydiv1" style="position: absolute; left: 725.5px; top: 113px;">
<div style="width: 197px" class="downlist">
<div>单价:.28元 时间:--</div>
<div>单价:.28元 时间:--</div>
</div>
</div>
</div>
这样父元素就会把子元素遮盖了
如果把mydiv1提到外层和父元素同级,则就不会被遮盖了
正确代码如下:放在</div>后面
</div>
<div id="mydiv1" style="position: absolute; left: 725.5px; top: 113px;">
<div style="width: 197px" class="downlist">
<div>单价:.28元 时间:--</div>
<div>单价:.28元 时间:--</div>
</div>
</div>
这样无论是安卓浏览器还是IE都显示在最顶层了
div绝对定位针对手机浏览器的区别的更多相关文章
- 记录-div绝对定位针对手机浏览器的区别
最近搞个wap ,有一个需求就是一些文字描述定位到一张图片上的某个地方,按照以往的方式直接通过定位div position: absolute; PC chrome 模拟手机显示没问题! 但是,在ip ...
- DIV与SPAN之间有什么区别
DIV与SPAN之间有什么区别 DIV 和 SPAN 元素最大的特点是默认都没有对元素内的对象进行任何格式化渲染.主要用于应用样式表(共同点). 两者最明显的区别在于DIV是块元素,而SPAN是行内元 ...
- Appium自动化(16) - 使用手机浏览器进行自动化测试
如果你还想从头学起Appium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1693896.html 前言 前面我都讲的都是针对 app ...
- css3在不同型号手机浏览器上的兼容一览表
网上搜集了css3对不同系统手机浏览器的支持情况(ios/android/winphone)备份一下以便查看. 以下资料由微信产品部"白树"整理, 转载请注明. √:完全支持 ...
- web app 禁用手机浏览器缓存方法
开发过web app的同学,特别是前端人员,都碰到这烦人的事情,JS或CSS代码改变,可手机浏览器怎么刷新都不更新,手机浏览器的缓存特别恶劣. 所以今天贴个方法解决这问题.记得,本地调试的时候贴上,上 ...
- 针对各种浏览器css不兼容的写法
/*针对谷歌浏览器内核支持的CSS样式*/@media screen and (-webkit-min-device-pixel-ratio:0) { 样式 } /*针对IE6特制识别的CSS样式*/ ...
- 微信或手机浏览器在线显示office文件(已測试ios、android)
近期开发微信企业号,发现微信andriod版内置浏览器在打开文件方面有问题,可是ios版没有问题.原因是ios版使用的是safari浏览器 支持文档直接打开.可是andriod版使用的是腾讯浏览器x5 ...
- 【百度地图API】手机浏览器抓包工具及其使用方法
原文:[百度地图API]手机浏览器抓包工具及其使用方法 摘要:为了测试地图API在手机浏览器上的性能,需要给手机浏览器设置代理.通过代理,我们可以在PC上获取到抓包数据.进而对性能做进一步分析. -- ...
- html兼容手机浏览器
其实主要就是改掉HTML页面声明: 在网页中加入以下代码,就可以正常显示了: <meta name="viewport" content="width=device ...
随机推荐
- WordPress网站搬家的问题
老邢的博客搬家全过程(wordpress搬家知识总结) 网站搬家过程中的几个问题 WordPress网站搬家的方法 WORDPRESS.ORG - zh-cn:WordPress 博客搬家 ...
- Android 应用开发者必看的 9 个 Tips
去年,Android应用数量已经超过iOS成为全球最大的生态系统,不过在这多大百万的应用中,有些应用的下载量很大,赚的盆满钵满:另外一些应用就石沉大海.无人问津了. 拥有多年程序开发经验,最近在开发A ...
- Linux-Tmux使用初体验
Tmux使用初体验 tmux #开启tmux tmux ls #显示已有tmux列表(ctrl+b s) tmux attach-session -t 数字 #选择tmux ctrl+b c 创建一个 ...
- 【ERROR】EXP-00091
问题: 在我们做exp的过程中可能经常会遇到EXP-00091: Exporting questionable statistics.这样的EXP信息,其实它就是exp的error message,它 ...
- LevelDB场景分析1--整体结构分析
基本用法 数据结构 class DBImpl : public DB { private: struct CompactionState; struct Writer;// Infor ...
- JAX-RS(REST Web Services)2.0 can not be installed: One or more constraints have not been satisfied
eclipse出错: JAX-RS(REST Web Services)2.0 can not be installed: One or more constraints have not been ...
- 有限狀態機FSM coding style整理 (SOC) (Verilog)
AbstractFSM在數位電路中非常重要,藉由FSM,可以讓數位電路也能循序地執行起演算法.本文將詳細討論各種FSM coding style的優缺點,並歸納出推薦的coding style. In ...
- [svc]samba服务搭建
说实话搞这些很蛋疼, 没啥技术含量. What is Samba? 这个历史悠久了 Since 1992, Samba has provided secure, stable and fast fil ...
- 【Android】19.1 SharedPreferences类
分类:C#.Android.VS2015: 创建日期:2016-03-05 一.简介 SharedPreferences:简单共享存储首选项.实际上就是用加密的内部文件保存所有页面都能访问的一系列“n ...
- webpack 利用Code Splitting 分批打包、按需下载
webpack中的解决方案——Code Splitting,简单来说就是按需加载(下载),如果是requireJS对应的AMD的方案中这本是在正常不过了.但是在webpack中All in one的思 ...