记录-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都显示在最顶层!

时间: 2025-01-12 08:34:55

记录-div绝对定位针对手机浏览器的区别的相关文章

CSS设置DIV背景色渐变显示--针对不同浏览器,背景渐变的兼容问问题

针对不同浏览器,背景渐变的兼容问问题! background: -ms-linear-gradient(top, #fff,  #0000ff);        /* IE 10 */ background:-moz-linear-gradient(top,#b8c4cb,#f6f6f8);/*火狐*/ background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#b8c4cb), to(#f6f6f8));/*谷歌*/ background:

【每天随笔】手机浏览器的出路

BAT在手机浏览器这一细分市场上的竞争一直以来激烈异常.腾讯--手机QQ浏览器,阿里--UC浏览器,百度--百度手机游览器.就市场占有率来看,手机QQ浏览器和UC浏览器旗鼓相当,但都甩开百度手机浏览器好几条街.仔细看看占市场头两把交椅的产品,琢磨琢磨手机浏览器的前路在何方? 从浅到深看看用户对一款手机浏览器的需求所在: 沙滩:要正确.快速的打开手机类网站,对PC类网站能适当转码,用户可以接受排版的适当损失,但需要能够获取页面的核心内容.扫码.收藏.夜间模式.下载管理.刷新.无痕浏览.无图省流量模

基于图像识别测试手机浏览器打开网页首屏时间的方法

本文涉及性能测试技术,特别是涉及一种基于图像识别的测试手机网页首屏时间的方法,它可以应用在手机浏览器页面加载响应时间的的自动化测试或性能检测中.同时可以应用到其他android的apk的响应时间的测试中去 随着智能手机等移动终端的发展,越来越多的用户开始通过手机等设备浏览网页,以获取用户所需的信息. 用户使用手机访问网站是基于手机浏览器所获取的网页实现的.通常情况下,用户访问网站的页面全部加载完毕时,总页面高度可能有一屏到多屏不等,总的页面加载时间要比首屏加载时间长很多,但是首屏加载时间是用户对

CSS+DIV布局中absolute和relative区别

http://developer.51cto.com/art/201009/225201.htm CSS+DIV布局中absolute和relative区别 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定位为relative的元素脱离正常的文本流中,但其在文本流中的位置依然存在,而定位为absolute的层脱离正常文本流,但与relative的区别是其在正常流中的位置不在存在. 详解CSS+DIV布局定位 在用CSS+DIV进行布局定位的时候,一

支付宝支付-手机浏览器H5支付

前言 支付宝支付—沙箱环境使用支付宝支付-支付宝PC端扫码支付支付宝支付-手机浏览器H5支付「本文」 手机浏览器支付,用户在安装支付宝APP的情况下,调用手机网站支付接口默认会唤起支付宝钱包支付,接下来通过运行官方Demo进行测试. 本文开发环境:IDEA + Tomcat8.5 + 支付宝沙箱环境* 补充:调用沙箱环境接口,需要安装沙箱环境下的支付宝APP,不了解的小伙伴可以参考上方 支付宝支付—沙箱环境使用. 下载运行测试Demo 官方Demo下载链接:手机网站支付 下载后导入 IDEA 中

通过实验,整理了部分主流手机浏览器的并发请求数

网上未见针对移动端的浏览器并发数统计,可见的帖子数据全部来自于 StackOverflow 关于主机浏览器的一篇描述.所以,设计了实验,探测了部分手机浏览器,对同域的并发访问量.以下是实验程序服务端(Java) static private final AtomicLong SEQ = new AtomicLong(0); @RequestMapping(value = "sleep/{s}", method = GET) public Result<Long> sleep

div与table用作布局的区别

本文向大家描述一下DIV和Table页面布局的区别和联系,一般来说Table开发快,容易控制,浏览器兼容也好些,另一部分认为DIV好,是以后的发展趋势,主要原因请看下文详细介绍. DIV布局和Table页面布局的区别和联系 现在对于网页制作是选择传统的Table还是用新型的DIV,有分歧.一部分说还是用Table好,开发快,容易控制,浏览器兼容也好些;另一部分认为DIV好,以后的发展趋势,主要是如下原因: DIV+CSS布局比Table布局节省页面代码,代码结构也更清晰明了. DIV+CSS开发

手机浏览器调试建议

使用电脑远程调试安卓手机上浏览器的JS (2014-01-14 22:44:04) 转载▼     有时候要开发在手机浏览器上运行的网页,这样就涉及到要调试JS,在电脑上怎么模拟,跟使用真机还是有区别,这里介绍几种用电脑远程调试JS的方法. 1.使用google浏览器,因为安卓本来就是谷歌的,因此它本身对此有支持,开发了相关的插件 1)首先,电脑上要有谷歌浏览器(Chrome),最好是最新版的(Chrome 31以上): 2)安装了安卓的SDK: 3)手机上也安装谷歌浏览器(Chrome for

微信jsApI及微信分享对应在手机浏览器的调用总结。

摘录自别人的博客: 第一篇:微信内置浏览器的JsAPI(WeixinJSBridge续) 之前有写过几篇关于微信内置浏览器(WebView)中特有的Javascript API(Javascript Interface)的文章,不过随着微信官方的调整,部分API已经不能直接使用,比如类似直接分享到朋友圈 WeixinJSBridge.invoke('shareTimeline',data,callback) 这样的功能,直接调用,会得到一个访问拒绝的response.后来重新调研了下,整理出来了