项目中遇到的坑,写篇博客做个笔记纪念下,position: fixed一般来说都兼容各个浏览器,但是要兼容浏览低版本问题,就得用-webkit-transform: translateZ(0);这段代码了。
 
项目中用到position: fixed;z-index: xxx;的时候,记得加上这个css:-webkit-transform: translateZ(0);    这个兼容position:fixed浏览器低版本    不然会有浏览器滚动出现闪烁bug。当然这里透明度opacity: 0.9;
也要做兼容的,这里就不具体做解释了。

.footer_main{
position: fixed;
height: 150px;
background: url(/static/web-v2.0/images/ad/IT/IT_footer.png) no-repeat top center;
width: 100%;
left: 0;
bottom: 0;
z-index: 9;
opacity: 0.9;
-webkit-transform: translateZ(0);
}

 

position:fixed 兼容浏览器低版本的更多相关文章

  1. AngularJS开发指南7:AngularJS本地化,国际化,以及兼容IE低版本浏览器

    AngularJS本地化,国际化 国际化,简写为i18n,指的是使产品快速适应不同语言和文化. 本地化,简称l10n,是指使产品在特定文化和语言市场中可用. 对开发者来说,国际化一个应用意味着将所有的 ...

  2. WebSocket兼容到低版本浏览器

    就目前而言,WebSocket是最好的Web通信解决方案了.但是IE从10才开始兼容它,对于目前大量IE8存在的市场,原生的WebSocket显然不太实用,我们需要低版本兼容的解决方案.于是我模拟We ...

  3. 使用socket.io client 开发时兼容IE低版本的办法

    使用socket.io client 开发时兼容IE低版本的办法 socket.io提供了针对各个版本浏览器的‘socket’功能的封转:websocket,长连接,流,flash什么的.给你格式化下 ...

  4. 轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现,兼容ie低版本浏览器

    项目源代码下载地址:轮播图 以下为项目实现效果:(由于gif太大,所以只上传一张图片,但效果完全能实现,经测试,在ie各版本浏览器及chrome,firefox等浏览器中均能实现效果,可以实现点击切换 ...

  5. js实现抛物线运动 兼容IE低版本(转)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  6. 本地存储组件--兼容IE低版本

        在前端开发过程中,会用到本地缓存,但是由于浏览器对不同规范支持的程度不一样,每次进行使用都要为兼容行花费不少时间.我整理了一个本地存储的组件.     组件特点: 可以配置使用localSto ...

  7. IE6下position:fixed;兼容

    *html{ background-image:url(about:blank); background-attachment:fixed;}/*解决抖动问题*/ .backto-top{ width ...

  8. 如何解决vux不兼容安卓低版本问题

    最近做移动端H5页面用VUX来写UI组件这块.ios测试的时候没啥大问题,不过在4.4版本的华为手机上测试就崩了.接下来详细记述下崩的几个点. 第一:vux自带的提示框,在低版本安卓系统上全不是居中显 ...

  9. 从 ie10浏览器下Symbol 未定义的问题 探索vue项目如何兼容ie低版本浏览器(ie9, ie10, ie 11 )

    问题:     vue项目在ie11下一片空白并报Symbol 未定义的错 原因:     ie10浏览器解析不了es6的语法,需要我们使用babel(Babel是一种工具链,主要用于将ECMAScr ...

随机推荐

  1. 将webcam设置为网站favicon

    今天在Twitter上看到用户davywtf将webcam设置为网站favicon. 在线示例: https://wybiral.github.io/code-art/projects/tiny-mi ...

  2. Linux mint 下开发设置

    切换thinpad Home-Pgup End-Pgdn sudo vim ~/.Xmodmap keysym Prior = Home keysym Next = End 禁用鼠标中间粘帖功能 su ...

  3. flex:1详解(转)

    转载自:https://blog.csdn.net/fengyjch/article/details/79047908 flex 是 flex-grow.flex-shrink.flex-basis的 ...

  4. Cocos Creator学习三:生命周期回调函数

    1.目的:学习生命周期回调函数以及回调顺序,更有利于我们逻辑的处理把控. 2.生命周期回调函数: 节点:指cc.Node:组件:指cc.Component. ①onLoad:脚本组件绑定的节点所在场景 ...

  5. python基础知识点(unittest)

    目录: unittest 单元测试框架 1.写用例: Testcase 2.执行:TestSuite 类 TestLoader 类 3.比对结果(期望值/实际值):断言函数 4.结果:TestText ...

  6. C#流程控制语句--迭代语句(while,do....while, for , foreach)

    迭代语句:有的时候,可能需要多次执行同一块代码.函数中的第一个语句先执行,接着是第二个语句,依此类推. 迭代语句:while(先检查后执行) while(条件表达式 bool类型) { 代码语句 } ...

  7. switch与if语句的应用

    C语言自学之switch与if语句的应用 #include<stdio.h> #include<stdlib.h> int main() { ;//需要计算的年份 ;//需要计 ...

  8. mac常用操作

    Command+Shift+. 可以显示隐藏文件.文件夹 touch a.txt 新建txt文件

  9. POJ-3450 Corporate Identity (KMP+后缀数组)

    Description Beside other services, ACM helps companies to clearly state their “corporate identity”, ...

  10. react和vue的不同

    React严格上只针对MVC的view层,Vue则是MVVM模式 virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.而对于React而言,每当应用的状态被改变时 ...