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 ...
随机推荐
- Android——AnimationDrawable 实现动画
Android中的AnimationDrawable可以加载Drawable资源实现帧动画.实现步骤如下: 一.设置动画播放的帧资源 <?xml version="1.0" ...
- spring mvc 接收页面表单List
很少写博客,如果写的不好请多多包涵! 最近在用Spring mvc时遇到一个问题,在网上搜了很多资料.几乎没看到解决办法! 例如:当我们在做批量添加或者更新时,在Controller层接收表单数据的问 ...
- onInterceptTouchEvent和onTouchEvent举例分析
首先自定义三个组件,其关系是:MyLayout在最上面,MySubLayout在MyLayout下面,MyView在MySubLayout下面. 一个点击事件进来,首先是DOWN动作,先是MyLayo ...
- MySQL Internal - InnoDB存储引擎(行结构)
InnoDB行存储的三个组成部分(说明: F字符表示列的数量) 名称(Name) 大小(Size) Field Start Offsets (F*1) or (F*2) bytes Extra Byt ...
- linux安装mysql出现Could NOT find Curses (missing CURSES_LIBRARY CURSES_INCLUDE_PATH)解决方法
编译 mysql5.6.22 出现以下错误提示: — Could NOT find Curses (missing: CURSES_LIBRARY CURSES_INCLUDE_PATH) CMak ...
- 利用css使文本在限制几行之后隐藏
想要在布局中显示一段新闻的标题或是内容,特别是内容,东西超多...下面的方法就是通过css来控制文本显示多少的: 首先在html中写上: <p class="ellipsis" ...
- 最初步的正则表达式引擎:nfa的转换规则。
[在此处输入文章标题] 正则到nfa 前言 在写代码的过程中,本来还想根据龙书上的说明来实现re到nfa的转换.可是写代码的时候发现,根据课本来会生成很多的无用过渡节点和空转换边,需要许多的代码.为了 ...
- [python] HDU自动登录提交代码程序
调了一个下午,被python的正则绊住了:在C#上运作好好的式子在python老是报错,原来python的断言式必须是固定长度的,像类似(?<=[^>].*?)的零宽度正回顾后发断言是不允 ...
- Shuffle an Array
class Solution { private: vector<int> arr, idx; public: Solution(vector<int> nums) { sra ...
- 【转】windows 如何查看端口占用情况?
开始--运行--cmd 进入命令提示符 输入netstat -ano 即可看到所有连接的PID 之后在任务管理器中找到这个PID所对应的程序如果任务管理器中没有PID这一项,可以在任务管理器中选&qu ...