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定位基本这些。。

时间: 2024-10-12 19:08:32

css解决IE6、Chrome、ff 浏览器position:fixed;和闪动问题的相关文章

DIV CSS兼容性解决IE6/IE7/FF浏览器的通用方法完美兼(转)

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果! 所有浏览器 通用height: 100px; IE6 专用_height: 100px; IE6 专用*height: 100px; IE7 专用*+height: 100px; IE7.FF 共用height: 100px !important; 一.CSS HACK1, !important随着IE7对!i

DIV+CSS解决IE6,IE7,IE8,FF兼容问题

DIV+CSS解决IE6,IE7,IE8,FF兼容问题1.IE8下兼容问题,这个最好处理,转化成IE7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了:1. <metahttp-equivmetahttp-equiv="x-ua-compatible"content="IE=7"/> 2. 2.flaot浮动造成IE6下面双倍边距问题,这个最常见,也最好处理,!important解决,比如margin-left:10px!

【css】修正ie6下不支持position:fixed

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta h

css解决div的各种浏览器兼容性问题

方法一: 1 min-height:500px;/*解决ie8.9.ff.chromet*/ 2 height:100%;/*解决ie6.7*/ 3 _height:500px;/*解决ie6超出自动溢出*/ 方法二: 1 min-height:400px;/*解决ie8.9.ff.chrome*/ 2 *+height:100%;/*解决ie7*/ 3 _height:400px;/*解决ie6超出自动溢出*/  方法三: 1 min-height:400px; height:auto!imp

各浏览器 position: fixed 造成的bug 通用解决办法,Safari, iOS

将原来使用 position: fixed  的元素外层包裹一个 div.fixedWrapper .fixedWrapper { width: 100%; overflow: hidden; position: relative; } 原贴:StackOverflow 原文地址:https://www.cnblogs.com/savokiss/p/9486240.html

安卓自带浏览器 position:fixed时 图片模糊问题

最近遇到一个问题:给一个div做position:fixed时,div里的图片在小米1s自带浏览器里面图片显示模糊了,而其它浏览器图片都是清楚的(说明:已经是2倍的图片了).代码如下: <div class="position:fixed">     <img src="xxx"> </div> 只要将posiiton:fixed去除时,图片又是清晰的.经过一方排插和google,确定该问题是andorid自带浏览器bug,在po

手机QQ内置浏览器position:fixed 属性支持不好的解决方案

在三星android 手机QQ内部打开连接时,有的手机QQ版本低时,会对position:fixed 支持不好. 表现在position:fixed 后 再用margin:0 atuo; 居中时,页面不居中: 可以这样解决:在外层再套一个div层.将position:fixed 属性放在外层然后定宽: 里面的层width:100%,margin:0 auto; 就可以完美支持低版本手机QQ position:fixed 后margin:0 auto; 不居中的问题.

CSS兼容IE6,IE7,FF的技巧(COPY来的,还没看)

一.CSS HACK 以下两种方法几乎能解决现今所有HACK.翻阅很多资料,已测试可以使用. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) PLAIN TEXT CSS: #wrapper { width: 100px!important; /* IE7+FF */ width: 80px; /* IE6 */ } 2, IE6/IE77对FireFox *+html 与 *ht

CSS兼容IE6,IE7,FF的技巧

一.CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK.(注意写法.记得该声明位置需要提前.) <style> #wrapper { width: 100px!important; /* IE7+FF */ width: 80px; /* IE6 */ } </style> 2, IE6/IE77对FireFox *+html 与 *html 是IE特