“fixed” css style in mobile safari

最近在实现一个微信问答html页面的过程中遇到一个问题:问答获得满分的时候有一个输入手机号参议抽奖的步骤,

在填写完手机号之后不点单击完成按钮(不隐藏软键盘)的情况下直接点击提交按钮,提交按钮本应显示一个全屏的cover,

但此时却只显示了中间的一段(隐藏软键盘的情况下是正常的),经查最后发现是cover层的position被设置为fixed的原因,

fixed是根据浏览器窗口进行定位(此时设置的百分比大小也是相对于窗口大小),所以显示出的cover只是软键盘显示时以上的那一段,解决办法是改用absolute或者通过resize、scroll触发浏览器重绘。

absolute
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed
生成绝对定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

时间: 2024-10-12 02:11:26

“fixed” css style in mobile safari的相关文章

Mobile Safari调用本地App, 否则进入App Store下载

需求: 如何让用户通过手机浏览器(Mobile Safari),访问一个URL就能直接打开ios上的App应用,如果该应用没有安装,那么直接跳转到App Store的App下载页面. 准备工作 ios SDK的OpenURL函数和URL Scheme JavaScript的window.location和setTimeout函数 代码实现 下面以打开暖岛app为例子,JS实现部分如下 window.location = 'nuandao://web2app'; setTimeout(functi

:active pseudo-class doesn't work in mobile safari

<body ontouchstart=""> ... </body> Applied just once, as opposed to every button element seemed to fix all buttons on the page. Alternatively you could use this small JS library called 'Fastclick'. It speed up click events on touch d

Enable CSS active pseudo styles in Mobile Safari

http://alxgbsn.co.uk/2011/10/17/enable-css-active-pseudo-styles-in-mobile-safari/ document.addEventListener("touchstart", function() {},false); html { -webkit-tap-highlight-color: rgba(0,0,0,0); }

jQuery的on绑定事件在mobile safari(iphone / ipad / ipod)上无法使用的解决方案

用一个div当做了一个按钮来使用. <div class="button"> <div class=" next_button button_left btn_red" style="width: 345px;"> 下一步 </div> </div> 因为是动态添加的内容,所以想要使用click事件,需要给他用on绑定一下: $(document).on("click",&quo

css style与class之间的区别

问题描述:    网页点击[导出]按钮后,将页面table内容另存成excel文件,却发现无法保存表格样式 分析过程: 1.table表格用class,而不是style.导出时并没有导出class定义,若换成style,将颜色样式直接写在style中,就会导出样式. style是样式,在HTML中用这个来标明属性样式,是css中的内容,而class是类,申明和定义里面的内容,导出页面时并不会导出定义即class所定义的样式. 2.将类定义放到table中也可以导出样式 解决方法-: 将class

css style与class之间的区别,cssclass

问题描述:    网页点击[导出]按钮后,将页面table内容另存成excel文件,却发现无法保存表格样式 分析过程: 1.table表格用class,而不是style.导出时并没有导出class定义,若换成style,将颜色样式直接写在style中,就会导出样式. style是样式,在HTML中用这个来标明属性样式,是css中的内容,而class是类,申明和定义里面的内容,导出页面时并不会导出定义即class所定义的样式. 2.将类定义放到table中也可以导出样式 解决方法-: 将class

css style study

<img style="float:none;display:block;margin:0px auto" src="images/aa.jpg"> float:元素在哪个方向浮动,左右或不浮动,left,right,none margin:边距为0 display 属性规定元素应该生成的框的类型.block,此元素将显示为块级元素,此元素前后会带有换行符. http://www.w3school.com.cn/cssref/pr_class_displ

解决Django Admin管理界面样式表(CSS Style)丢失问题

我在配置django自带管理界面过程中登录http://domain.com/admin后台时出现样式表丢失的问题,界面变成了这样: 系统环境:centos6.5+nginx1.5.9+uwsgi2.0.4+django1.4.9 nginx配置文件: server {         listen       80;         server_name  www.omserver.com;         location / {             uwsgi_pass 192.16

[Webpack] Access Webpack Dev Server from Mobile Safari on an iPhone

Testing your sites on mobile devices is a critical part of the development process. Webpack dev server enables you to visit the server from any device using the host option. This lesson walks you through accessing webpack dev server using an iPhon Ch