记录-div绝对定位针对手机浏览器的区别
最近搞个wap ,有一个需求就是一些文字描述定位到一张图片上的某个地方,按照以往的方式直接通过定位div
position: absolute; PC chrome 模拟手机显示没问题! 但是,在ipad和安卓平板做测试,发现文字描述并没有定位打图片中,发现消失呢! 研究了好久,发现是代码的位置问题。 修改前:
<figure>
<a href="default.htm"><img src="css/images/banner1.jpg"></a>
<figcaptiontop>
<hgroup>
<h3 class="clearfix">
<a href="javascript:void(0)" id="JiangLi"><strong></strong></a></h3>
</figcaptiontop>
<figcaptionbottom>
<h3 class="clearfix">
<span>(108作品)</span>
</h3>
</figcaptionbottom>
</figure>
这样父元素就会把子元素遮盖了
如果把figcaptiontop提到外层和父元素同级,则就不会被遮盖了
修改后:
<figure>
<a href="default.htm"><img src="css/images/banner1.jpg"></a>
</figure>
<figcaptiontop>
<hgroup>
<h3 class="clearfix">
<a href="javascript:void(0)" id="JiangLi"><strong></strong></a></h3>
</figcaptiontop>
<figcaptionbottom>
<h3 class="clearfix">
<span>(108作品)</span>
</h3>
</figcaptionbottom>
这样无论是安卓浏览器还是IE都显示在最顶层!
记录-div绝对定位针对手机浏览器的区别的更多相关文章
- div绝对定位针对手机浏览器的区别
最近在对ipad和安卓平板做测试,发现我自己写的一个下拉控件在安卓浏览器里面被遮盖了,但是PC或者ipad都没有这个现象,一开始以为是z-index 可是无论我调多少都没有用,研究了好久,发现是代码的 ...
- 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上获取到抓包数据.进而对性能做进一步分析. -- ...
- UC手机浏览器js加入收藏夹
概述 对于某些网站来说,让用户一键把网页加入收藏夹的设计是非常棒的,它能提醒用户把网页加入收藏夹,从而增加用户的回访率,使网站获得更多的流量. 在PC端,只有ie和ff支持用js把网页加入收藏夹的操作 ...
随机推荐
- 图概PHP生命周期
一图胜千言~ 这是之前根据网上大牛们的分析和跟着阅读了一点源码而做出来的总结.因为那时候困于对整个过程没有一个全面的认识,所以想自己做个图吧,那样看起来要更加直接了当,说不定还能会有一个更好的认识和更 ...
- 关于oracle中数据类型的选择
由于是初学,犯了如下错误: 生成表的主键id时,用当前时间的毫秒值.而在oracle中定义主键id时,用的数据类型是char(32).在mybatis中通过id取数据怎么也取不出来.想了好几天,本来以 ...
- [iOS]技巧集锦:UICollectionView内容下沉64像素原因和解决方案
现象 UICollectionView的内容在按Home键再回到APP时,会下沉64像素. 原因 页面有NavigationBar,正好是64像素,Controller勾选了Adjust Scroll ...
- Sql server2012 常见异常处理
网络相关 无法通过IP(127.0.0.1 或者其他本机)连接 确保TCP/IP功能开启 打开1433端口 权限相关 代理的权限,通过更改有最高权限的用户,或者给该用户指定的权限 给域用户开通SQLS ...
- 三维等值面提取算法(Dual Contouring)
上一篇介绍了Marching Cubes算法,Marching Cubes算法是三维重建算法中的经典算法,算法主要思想是检测与等值面相交的体素单元并计算交点的坐标,然后对不同的相交情况利用查找表在体素 ...
- HTML ------ 关于表单 Form
Form(表单)主要用于采集和提交用户输入的信息,是页面与WEB服务器交互过程中 最重要的信息来源. 掌握表单(Form)有以下几个要点: 重要form属性 form常用控件 form提交方式 § 重 ...
- 国内外前端(js)开发框架对比
国内外前端开发框架对比 首先我们先对目前国内外主流前端开发框架做一个基本的了解,之后再对他们进行一个直观的对比. Bootstrap Bootstrap(http://www.bootcss.com) ...
- 常用Git代码托管服务分享
Git Repository代码托管服务越来越流行,目前有很多商业公司和个人团队逐渐切换项目到 Git平台进行代码托管.本文分享一些常用的Git代码托管服务,其中一些提供私有项目保护服务,特别有利于远 ...
- c语言游戏推箱子
前两天做了推箱子小游戏,看似简单的一个小游戏背后却 有巨大的秘密,这秘密就是一大堆逻辑. 自从学习了函数过后,的确是解决了很多问题,而且调用很方便,尽管我现在都不是很会调用. 写完一个函数,准备测试一 ...
- 在基于vue的webpack脚手架开发中使用了代理转发,结果浏览器发出的请求中不带cookie导致登录时总是session失效怎么办?
环境: 有2个业务接口需要转发到82的服务器上: ../user/getCode.do ../user/doLogin.do 现象: 使用上述的 ...