低版本手机浏览器不支持position: fixed的解决方法

最新推荐文章于 2022-09-11 22:38:56 发布

Ladyson

最新推荐文章于 2022-09-11 22:38:56 发布

阅读量1.6k

点赞数

分类专栏：项目管理

本文链接：https://blog.csdn.net/sasa9090/article/details/39098707

版权

项目管理专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近在网上接了单私活，做的是手机wap的，其中涉及到fixed漂浮窗的用法，发现部分手机浏览器对fixed不支持，不会随着屏幕而滚动，经过多次测试，找到了解决方法，只需要在页面头部mate加上下面一句话就可以解决了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Ladyson

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

position:fixed 固定定位

asdfgv2022的博客

08-03

5万+

元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：特性特性：1.元素脱离正常文档流，不占位(也脱离文本流，全脱)2.始终相对于浏览器窗口四个角为原点进行固定定位的3.不会随页面的内容滚动而滚动4.能使不能设置宽高的行级元素设置宽高5.提升层级6.如果没有定位偏移属性，对元素本身有影响；应用场景：相对于窗口定位的元素如弹窗、跟随滚动的导航、侧边栏...

手机浏览器不支持position: fix的解决方法

09-22

在网页设计中，`position: ...总的来说，当遇到手机浏览器不支持 `position: fixed` 的问题时，可以通过调整CSS和引入JavaScript来模拟这个效果。虽然这需要额外的工作，但可以确保在各种设备上提供一致的用户体验。

1 条评论您还未登录，请先登录后发表或查看评论

解决移动端不支持position: fix

IT探险者-returningprodigal

09-06

1881

最近我在做自己公司的官网，pc端做出来了，网页浏览顺畅，但到了手机端测试，问题出现了：网页上的悬浮菜单滑动的时候，不会跟着滚动条走，并且网页出现了横向滚动条。在这个问题上我折腾了整整一下午的时间，但还是没有解决问题。最终是在第二天早上花了半小时搞定的。从这个问题上我得到了一种解决问题的思路 1. 当解决一个问题花了较长的时间时，不妨休息下，放在第二天早上去解决，你会收获不一样的感觉。 2.

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

wxyoo1 的技术人生

02-06

3702

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

position:fixed；在 android 下无效怎么处理？

qq_38757174的博客

06-20

637

position:fixed; 在 android 下无效怎么处理？这个是因为移动端浏览器默认的 viewport 是 layoutviewport，它的宽度大于移动端屏幕，所以页面会出现左右滚动条，fixed 是相对 layoutviewport 来固定的，而不是屏幕，所以会感觉出现 fixed 无效; 处理方法：改变 viewport 的大小为 idealviewport ...

uniapp position: fixed 偶尔失效/不起作用（不显示）（苹果手机position: fixed兼容性/失效）

qq_17627195的博客

09-11

5829

在苹果的产品中并没有实现相对浏览器窗口定位。其实现的功能是相对最近的允许滚动的元素定位，且不能遮罩滚动元素的兄弟元素及其所有父元素的兄弟元素。并不是相对于浏览器窗口固定位置，它是相对于滚动元素固定位置。我也是网上查找的原因，似乎知识IOS系统（苹果）手机的问题。的元素放在可以滚动（拥有滚动条）元素的外面，包括。，要确保当前元素的父元素都不能添加滚动样式。的时候，如果期望实现先对。浏览器窗口定位的兼容。

跨浏览器的实践:position:fixed 层的固定定位

10-30

这个例子中的技巧在于，通过媒体查询和 IE 特有的 CSS 规则，让在支持 `position: fixed` 的浏览器中正常工作，同时在不支持的浏览器中采用备选方案，确保了在大多数浏览器中都有良好的用户体验。总的来说，`...

IE6支持position:fixed完美解决方法

10-30

本文将介绍一种更优雅、资源效率更高的方法来解决IE6对`position:fixed`的支持问题，这种方法是通过条件注释和CSS表达式来实现的。首先，我们可以使用HTML的条件注释（Conditional Comments）来针对IE6加载特定的...

详解iOS中position:fixed吸底时的滑动出现抖动的解决方案

08-26

在这种方法中，需要将 header 和 footer 设置为 position:fixed，并设置中间滑动部分的 padding-top 和 padding-bottom，以便在上下方向超出一屏的部分变成滚动模式并不溢出。第二种解决方案是使用 transform: ...

IE6浏览器不支持固定定位（position：fixed）解决方案

09-25

IE6浏览器对CSS中的固定定位（position: fixed）不支持，这是一个众所周知的问题。IE6以及其他一些旧版本的浏览器，比如IE7和IE8，在文档处于怪异模式（quirk mode）时，会将position: fixed视为错误值，并将其忽略...

安卓低版本的内置浏览器

10-29

平时开发h5时有时低版本手机报错，无法查看到对应的错误，用安卓低版本的浏览器打开，可以方便查看报错，有利于调试

解决IE不支持position:fixed问题

hmonkey915的专栏

02-28

4053

页面上需要一个固定位置的块，不论页面怎么滚动，始终停在它的位置，比如“返回顶部”、“给建议”、“分享按钮”、“广告”等等。css中有position: fixed;可以直接用。IE确不支持，有没有好的办法解决评论 (1) • 分享 • 链接 • 2012-02-03 0 这个兼容性问题通常是采用JS+绝对定位方式处理 – xiaomi 2012-02-0

手机百度浏览器底部fixed悬浮框屏蔽问题，终极解决方案

XYCMS博客家园

01-15

1310

手机百度APP或者浏览器屏蔽广告被很多网页前端设计师困扰，也有很多网友提供解决方案，但是目前很多就被百度识破，增加了屏蔽规则，使其失效！网络目前提的办法： 1.使用伪类生成器也就是使用::after伪类，实测，已经不起作用！ 2.改变图片宽度100%或者高度超过150px; 我经过实测，只要是悬浮广告，还是被K 作者的认知：为什么会这样？因为百度屏蔽的是悬浮元素属性fixed;只要不带这个,百分之九十几通过，不会被屏蔽，那有的同学就说，为什么有的网站悬浮导航通过？首先我需要告诉您的，

移动端ios使用fixed定位，偶现元素不显示问题（百度浏览器）

qq_41906802的博客

04-19

1739

移动端，百度浏览器使用fixed问题

Android系统中 webkit 内核浏览器position:fixed所造成的兼容问题

热门推荐

icysoul的专栏

01-31

1万+

背景概述 Google已经在Mobile Web App开发上取得了很大的突破. HTML5已经拉近了Mobile设备Native App与Web App的差距. mobile Gmail 正是Google的Fixed position的最佳实践之一. iPad上的基于两栏的Gmail也运用了这种实现机制. 桌面浏览器本身就支持 position: fixed. 但 mobile Sa

手机百度浏览器fixed定位问题

CamilleZJ的博客

11-06

1051

如上边这样一张图片，底部有一个按钮这个按钮固定在底部（fixed定位）；看似很简单的一个效果实现，然而在百度浏览器却出现了问题：这个底部固定定位按钮会闪现之后就不见了，其他浏览器上正常显示，找了挺长时间的原因，才发现是百度浏览器的广告屏蔽机制，会让这种固定定位在底部的元素当作广告来屏蔽掉（隐藏移除不显示）。找问题过程发现高度大于一定程度就不会被屏蔽，正常显示，网上说height<...

手机百度APP H5网页底部元素position:fixed属性失效. DIV元素结构被自动隐藏

D.uccky的博客

05-28

3623

如下图,在很多H5活动页都会有一个固定在底部的下载按钮,由于有设计好的字体,为了方便,通常会选择用一个图片放在div里面,再对div使用position:fixed属性. 但是由于手机百度APP里面有一个功能,叫做自动屏蔽广告.由于大多数的网页广告都才用这种展现的形式.所以,他们会把这个按钮当做广告直接屏蔽掉.此前,直接对img加了一个width:100%;的属性. 后来经过不断地尝试.发现只要图...

解决IE6浏览器position:fixed兼容性问题的技巧

"解决Internet Explorer 6 (IE6) 浏览器中position:fixed固定定位问题的方法" 在Web开发中，Internet Explorer 6（简称IE6）常常因其对CSS标准的支持不足而让开发者头疼。其中，一个常见的问题是IE6不支持`position...