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 ...
随机推荐
- 深入理解 iOS 开发中的锁
来源:伯乐在线 - 夏天然后 链接:http://ios.jobbole.com/89474/ 点击 → 申请加入伯乐在线专栏作者 摘要 本文的目的不是介绍 iOS 中各种锁如何使用,一方面笔者没有大 ...
- Android(java)学习笔记264:Android下的属性动画高级用法(Property Animation)
1. 大家好,在上一篇文章当中,我们学习了Android属性动画的基本用法,当然也是最常用的一些用法,这些用法足以覆盖我们平时大多情况下的动画需求了.但是,正如上篇文章当中所说到的,属性动画对补间动画 ...
- 基于Jquery Validate 的表单验证
基于Jquery Validate 的表单验证 jquery.validate.js是jquery下的一个验证插件,运用此插件我们可以很便捷的对表单元素进行格式验证. 在讲述基于Jquery Vali ...
- Java程序员必备的 15框开发工具
15款Java程序员必备的开发工具 如果你是一名Web开发人员,那么用膝盖想也知道你的职业生涯大部分将使用Java而度过.这是一款商业级的编程语言,我们没有办法不接触它. 对于Java,有两种截然不同 ...
- jQuery两个列表中元素相互交换Demo
效果如图: <html> <head> <meta http-equiv="Content-Type" content="text/html ...
- hdu 4725 最短路
思路:将每个layer拆成两个点,编号为N+x,和N+N+x.对所有属于layer x的点i,建N+x到i的有向边,在建i到N+N+x的有向边.最后对所有x号layer和x+1建一条N+N+x到N ...
- 修复浏览器不支持Array自带的indexOf方法的扩展
JavaScript中Array的indexOf方法支持的浏览器有:IE9+.Firefox 2+.Safari 3+.Opera 9.5+和Chrome 如果想要在不支持的浏览器中使用indexOf ...
- R语言快速入门
R语言是针对统计分析和数据科学的功能全面的开源语言,R的官方网址:http://www.r-project.org/ 在Windows环境下安装R是很方便的 R语言的两种运行模式:交互模式和批处理模 ...
- C#_字符串的操作
1: using System; 2: using System.Collections.Generic; 3: using System.Linq; 4: using System.Text; 5: ...
- Android开发的十项注意
随着移动平台的发展及其应用的不断改善,质量成为决定成败的关键.用户要求他们安装的应用响应快.性能好,如果某个应用不能提供卓越的功能和稳定的用户体验,那注定会被很快卸载: 尽管现在Android智能手机 ...