css解决IE6、Chrome、ff 浏览器position:fixed;和闪动问题
首先说下开发模式,刚刚开始接触,基本沿用web端开发方式,目前开发模式上没有找到的适合的,现在基本这样:
1,电脑nginx配置服务器
3,电脑和手机连同一个局域网,
2,android root 和 iphone越狱 来绑hosts,访问电脑配置的环境。
但是 UC,QQ浏览器缓存严重,根本对hosts的文件的修改无动于衷。。不得每次修改将文件更到外网修改,调试起来相当麻烦。
一个问题是有些根本不支持fix定位,这个只有绑定js touchmove事件兼容了。
最令人头疼的是不完全支持。。
首先遇到的问题是在fix定位的元素内不能有 position:relative 或者 absolute的元素,如果有,这些元素不会受到fixed的祖先元素的限制,会根据body定位,滚动到最底部的时候才跟着fixed元素一起滚动。这个的解决就是去掉那些定位,换用其他定位方式。。
另一个问题fix定位后,fix的浮层根本不显示,只有滚动到最底部才显示出来,然后可以正常fixed定位。这个层是js动态添加,我曾经试过在js里 el.style.display = ‘none’;el.style.display = ‘block’; 但是没有任何作用,最终解决方法是在css里设置display:none; 然后动态插入body后设置 style.display = ‘block’;这个问题解决。
在解决这个问题后,还有一个问题是这个fix的层在没有滚动的时候可以正常点击,但滚动后点击这个层根本没有反应,这个层会被透过就像设置了 : pointer-eventes:none; 一样,点击到了层的下一层。这个的解决是
将 在viewport添加 user-scalable=no:
| 代码如下 | 复制代码 |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" /> |
|
变成:
| 代码如下 | 复制代码 |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0 user-scalable=no"/> |
|
恩,fix定位基本这些。。
css解决IE6、Chrome、ff 浏览器position:fixed;和闪动问题的更多相关文章
- DIV+CSS解决IE6,IE7,IE8,FF兼容问题(转至http://www.douban.com/note/163291324/)
2011-07-25 21:11:47 DIV+CSS解决IE6,IE7,IE8,FF兼容问题 1.IE8下兼容问题,这个最好处理,转化成IE7兼容就可以.在头部加如下一段代码,然后只要在IE ...
- 五行代码终极完美解决从IE6到Chrome所有浏览器的position:fixed;以及闪动问题
这个方法其实已经使用很久了,之前主要在嵌入式WebQQ等产品中用过,现在拿出来分享一下吧,是目前最简洁的方式来实现ie6的position:fixed; 失效bug,以及的其他方法的闪动问题,CSS代 ...
- DIV+CSS解决IE6,IE7,IE8,FF兼容问题
1.IE8下兼容问题,这个最好处理,转化成IE7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了:1. <metahttp-equivmetahttp-equiv ...
- 各浏览器 position: fixed 造成的bug 通用解决办法,Safari, iOS
将原来使用 position: fixed 的元素外层包裹一个 div.fixedWrapper .fixedWrapper { width: 100%; overflow: hidden; pos ...
- css解决div的各种浏览器兼容性问题
方法一: min-height:500px;/*解决ie8.9.ff.chromet*/ height:100%;/*解决ie6.7*/ _height:500px;/*解决ie6超出自动溢出*/ 方 ...
- css解决IE6,IE7,firefox兼容性问题
在当前IE6 IE7 FifeFox三分天下的情况下,浏览器兼容性问题成为网页设计者需要考虑的问题. 区别不同浏览器的CSS hack写法: 区别IE6与FF: background:orange;* ...
- 【css】ie6 和 ie7 下 position 与 overflow 的问题
前几天做的项目中碰到这样一个问题,在 ie6 和 ie7 下,给父元素设置 overflow:hidden 不起作用无法隐藏,后来发现是子元素中有设置 position:relative,如果子元素删 ...
- css解决谷歌,360浏览器默认最小字体为12px问题
当我们设置前台html页面样式问题字体小于12px;时,会发现不管怎么设置小于12px字体,在谷歌.360浏览器上都不生效. 但在火狐等浏览器上却可以正常设置,当你打开谷歌360的设置后会发现,它们设 ...
- css区分ie6,7,ff
IE6能识别*,但不能识别 !important,IE7能识别*,也能识别!important;FF不能识别*,但能识别!important; 可以这样区别FF,IE7,IE6: background ...
随机推荐
- chrome打不开12306
chrome打不开12306怎么办?chrome怎么会打不开12306? chrome打不开12306: 1.没有安装12306网站的根证书. 2.打开https://dynamic.12306.cn ...
- shadow fight 1.6.0 内购
shadow fight 之前的版本只需要安装LocallApstore即可内购. 1.6.0的版本中加了越狱检查. 所以LocallApstore 无法直接使用. 需要安装xcon避开越狱检查. 也 ...
- 小白日记51:kali渗透测试之Web渗透-WebShell(中国菜刀、WeBaCoo、Weevely)
webshell 本质:<?php echo shell_exec($_GET['cmd']);?> windows平台 中国菜刀官网:胖客户端程序,国产中比较优秀的webshell,适用 ...
- Design Mode 之 创建模式
A.创建模式 首先,简单工厂模式不属于24种涉及模式. A0.简单工厂模式 简单工厂模式,分为三种:普通简单工厂.多方法简单工厂.静态方法简单工厂. A01.普通 就是建立一个工厂类,对实现了同一接口 ...
- IOS 图片转换二进制 二进制转换为图片
//类方法 图片 转换为二进制 +(NSData *)Image_TransForm_Data:(UIImage *)image { NSData *imageData = UIImageJPEGRe ...
- 编译代码报出Android library projects cannot be launched错误的解决
Android library projects cannot be launched错误的解决方法: 右键工程根目录->properties 左侧选择->android
- Java Script基础(三) 函数
一.JavaScript中的函数 在JavaScript中,函数类似于Java中的方法,是执行特定功能的代码块,可以重复调用.JavaScript中的函数分为两种,一种是系统函数,另一种是自定义函数. ...
- 精通CSS高级Web标准解决方案(1-1选择器)
设计代码的结构 使用有意义的标记 css可以控制页面的外观并将表现与内容分隔开. 在分配ID与类名时尽量保证有意义且与表现无关. div可以对块级元素进行分组,而span可以对行内元素进行分组或标识. ...
- mysql开启general log的方法
因为为了性能考虑,一般general log不会开启.slow log可以定位一些有性能问题的sql,而general log会记录所有的SQL. mysql5.0版本,如果要开启slow log.g ...
- ionic实现双击返回键退出软件
1.首先要安装cordova插件:插件地址:cordova plugin add https://github.com/EddyVerbruggen/Toast-PhoneGap-Plugin.git ...