微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > html教程 > 正文

position:fixed如何兼容浏览器低版本

一个新手
发布： 2017-10-02 19:41:03
原创
2411人浏览过

项目中遇到的坑，写篇博客做个笔记纪念下，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);
}
登录后复制

一览AI绘图
一览AI绘图

一览AI绘图是一览科技推出的AIGC作图工具，用AI灵感助力，轻松创作高品质图片

一览AI绘图 45
查看详情 一览AI绘图

以上就是position:fixed如何兼容浏览器低版本的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：php中文网
收藏 点赞
上一篇：Vue生命周期是什么 下一篇：选择输入框的应用方式
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
在Angular应用中动态插入Span元素至CKEditor的教程 本教程详细介绍了如何在Angular应用程序中，利用ngModel双向绑定机制，高效且简便地向CKEditor富文本编辑器动态插入HTML内容，特别是元素。通过配置CKEditor组件、编写TypeScript逻辑来修改绑定数据，编辑器内容将自动更新。文章还涵盖了插入带随机ID的、内容安全及性能优化等关键注意事项，旨在提供一套完整的专业级解决方案。
2025-11-06 13:49:23
722
html如何套用域名_HTML内容绑定域名（DNS/服务器）配置方法 答案：绑定HTML网站到域名需配置DNS解析和服务器设置。1.设置A记录将域名指向服务器IP，CNAME记录配置子域名；2.在Apache或Nginx中配置ServerName和站点根目录；3.将HTML文件部署至指定路径并设权限；4.通过ping、nslookup验证解析，检查防火墙和日志确保服务正常。
2025-11-06 13:49:02
715
解决带滚动条的HTML元素水平对齐偏差：CSS布局实践 在复杂的HTML布局中，当元素拥有不同父级且其中一个出现滚动条时，实现精确的水平对齐会面临挑战。本文探讨了由于滚动条宽度导致的对齐偏差问题，并提供了一种纯CSS解决方案。通过优化元素高度、调整滚动条位置以及利用box-sizing属性，可以确保即使在存在滚动条的情况下，也能实现内容区域的完美水平居中对齐，避免使用复杂的JavaScript计算。
2025-11-06 13:47:19
901
html如何实现空行_HTML空行（br/段落间距）插入与控制方法 使用br标签可插入单个空行，p标签通过默认间距形成段落分隔，CSS的margin或padding能精确控制空行高度，pre标签保留原始换行格式。其中，br适合简单换行，p配合CSS更符合现代网页标准，CSS提供灵活间距控制，pre用于特殊场景如代码展示。合理选择方法可提升排版效果。
2025-11-06 13:41:02
169
使用jQuery实现动态“加载更多”功能详解 本文深入探讨了在使用jQuery实现“加载更多”功能时，动态内容加载不连续的问题。核心在于jQuery选择器获取的元素集合是静态的，不会自动更新。教程提供了两种解决方案：一是通过slice()方法更新已处理的元素集合，二是每次点击时重新查询隐藏元素，确保每次操作都基于最新的DOM状态，并强调了现代JavaScript的最佳实践。
2025-11-06 13:37:55
632
在网页中实现带确认弹窗的Android应用启动 本文将详细介绍如何在网页中通过自定义确认弹窗来启动Android应用。这种方法通过在用户点击触发链接后，先展示一个模态对话框，待用户明确同意后才执行AndroidIntentURI跳转，从而提升用户体验并避免不必要的应用启动，确保用户操作的意图性。
2025-11-06 13:37:42
610
在Spring Boot应用中正确配置CSS背景图片路径 本文旨在解决在SpringBoot项目中，CSS文件引用背景图片时常见的路径问题。当CSS文件与图片文件位于不同目录下时，直接使用相对于HTML的路径会导致图片无法加载。核心解决方案在于正确理解CSS文件中路径的相对性，并通过使用../等相对路径符号来准确指向图片资源，确保背景图片能被浏览器正确解析和显示。
2025-11-06 13:36:33
936
Phaser JS中实现敌人视线与射击AI：几何检测与射线投射教程 本教程将深入探讨如何在PhaserJS游戏中实现敌人AI的视线检测与射击逻辑。我们将介绍两种主要方法：利用Phaser内置的几何交叉检测功能进行基础视线判断，以及采用射线投射（Raycasting）技术处理包含障碍物的复杂场景。文章将详细阐述每种方法的原理、适用场景及实现细节，旨在帮助开发者构建更智能、更具挑战性的敌人行为。
2025-11-06 13:35:01
321
使用CSS和JavaScript实现HTML元素抖动效果教程 本教程详细介绍了如何利用CSS的@keyframes和animation属性为HTML元素创建视觉上的抖动效果。文章不仅涵盖了抖动动画的定义与应用，还进一步讲解了如何通过JavaScript动态触发和控制动画的持续时间，实现类似“函数调用”的灵活交互，并提供了完整的代码示例和实践建议。
2025-11-06 13:33:19
300
JavaScript实现HTML表格分数获取与科目平均分计算教程 本教程详细讲解如何使用JavaScript从HTML表格中获取分数，并将其与对应的科目关联，进而计算并显示科目的平均分。通过分析优化的HTML结构和DOM遍历技术，我们将学习如何精确地定位元素、处理用户输入，并构建一个功能性的科目成绩平均分计算器。
2025-11-06 13:28:11
181
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部