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 ...
随机推荐
- 面向对象程序设计(OOP设计模式)-行为型模式之观察者模式的应用与实现
课程名称:程序设计方法学 实验5:OOP设计模式-行为型模式的应用与实现 时间:2015年12月02日三,第3.4节地点:理 一.实验目的 加深对行为型设计模式的理解以及在开发中的实际应用能力. 二. ...
- eclipse svn登陆用户保存信息删除
win7系统 eclipse svn saveinfo path:磁盘:\%用户名%\AppData\Roaming\Subversion\auth\svn.simple 例如:D:\Users\用户 ...
- SVN标准开发布局目录,trunk,branches,tags用法详解
http://www.cnblogs.com/newstar/archive/2011/01/04/svn.html 关于 SVN 目录结构 Subversion有一个很标准的目录结构,是 ...
- JS阻止冒泡方法(转)
S事件流其中一种是冒泡事件,当一个元素被触发一个事件时,该目标元素的事件会优先被执行,然后向外传播到每个祖先元素,恰如水里的一个泡泡似的,从产生就一直往上浮,到在水平面时,它才消失.在这个过程中,如果 ...
- 奇葩属性:layout_weight 的解释及使用
在Android的控件布局中,有一个奇葩的 layout_weight 属性,定义如下: layout_weight : 用于指定剩余空闲空间的分割比例.用法: 01 <LinearLayout ...
- mac下安装mysql 1820 重置默认密码
mac安装mysql时会给出一个临时密码 记录下来 2018-03-17T02:14:10.809431Z 1 [Note] A temporary password is generated for ...
- Fix-Mapped Addresses
一.前言 某天,wowo同学突然来了一句:如果要在start_kernel中点LED,ioremap在什么时间点才能调用呢?我想他应该是想通过点LED灯来调试start_kernel之后的初始化的代码 ...
- SqlServer 获取汉字的拼音首字母
一.该函数传入字符串,返回数据为:如果为汉字字符,返回该字符的首字母,如果为非汉字字符,则返回本身.二.用到的知识点:汉字对应的UNICODE值,汉字的排序规则.三.数据库函数: CREATE FUN ...
- java连接mysql数据库实例
做游戏客户端多一年多了,在大学学的java的SSH,基本上都忘完了,今天看了一下发现基本的连接数据库的都忘了...太可怕了这遗忘的速度. 所以写了个连接的例子吧..安装好mysql数据库之后新建了两张 ...
- Apply Bug10010310 On Oracle RAC 10.2.0.5
9月24日数据库上频繁出现例如以下错误 Errors in file /u04/admin/njord/udump/njord_ora_25895.trc: ORA-27300: OS system ...