求助：有谁解决过微信内置浏览器不兼容浮动的

2014-01-11 02:18:34 4k 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

display: flow-root：终结浮动塌陷的原生BFC方案 BFC（块级格式化上下文）是CSS布局中解决浮动塌陷与外边距合并的核心机制，其原理在于创建独立的渲染边界，确保容器正确包含浮动子元素并隔离内部布局影响。传统触发方式如overflow:hidden或position:absolute常带来裁剪、定位失控等副作用，而display: flow-root作为W3C标准化的display值，专为无副作用地建立BFC而设计——它不改变文档流位置、不隐式裁剪、不干扰后续布局。该技术显著提升浮动场景下的样式可维护性与渲染性能，广泛适用于导航栏、商品卡片、图文混排等需兼容阅读详情



<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<title>浮动测试</title>

<style type="text/css">

	#mcover {background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7); text-align:right; display:block; height: 100%;left: 0; position: fixed; top: 0; width: 100%; z-index: 2000000;}

</style>



<meta name="description" content="" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />







</head>

<body>



	<div style="width:310px; height:1000px; margin:0px auto; border:1px #000000 solid">

	

		<div style="" onclick="document.getElementById('mcover').style.display='';" id="mcover"><img src="http://img.my.csdn.net/uploads/201401/11/1389420919_5249.png"></div>

		

	</div>



</body>

</html>

这个页面，pc机和移动设备的普通浏览器都能浮动，也就是鼠标滚动的时候，最上面的层保持不动，但是在微信内置的浏览器中，无效，特来求助，不胜感谢。

...全文

LaMAR数据集下载和使用流程 LaMAR数据集阅读详情

铁马渡江河

CSS 61,116 成员 60,701 内容

+ 关注 + 加入社区

切换为时间正序

qq_16936277 2014-10-10

打赏
举报

移动页面开发，有固定定位就最好别用响应式，有定位元素就得考虑页面布局了，一个页面有两个或两个以上的input标签的话，定位元素如何不受手机软键盘影响是个大问题。

fonglezen 2014-08-05

打赏
举报

我给一个元素定位为fixed，但是有时候打开页面会发现定位的元素不在固定的位置上，本来固定在顶部的，却走到了中部去了，这是为什么呢，知道么？

qq_16468745 2014-06-12

打赏
举报

那要兼容ios7怎么办？

铁马渡江河 2014-01-11

打赏
举报

引用 3 楼 zyl_lyr1019 的回复:

我就是在说.......

哈哈我知道什么问题了原来是手机系统版本问题我找了其他手机测试了代码没有任何问题的感谢啊

张运领 2014-01-11

打赏
举报

我就是在说，解决你这个问题的啊，微信浏览器，是用的腾讯自己的浏览器，腾讯的浏览器都是IE的内核。所以才考虑一下，是不是因为不支持fixed的属性，导致的这个问题。还有你添加的强制以IE的最新模式和chrome=1的模式解析，这个会不会有影响，这只是为了去进一步确认问题的根源而已。

铁马渡江河 2014-01-11

打赏
举报

引用 1 楼 zyl_lyr1019 的回复:

这个问题吧，你看看是不是因为固定定位惹得祸...

其实无需兼容pc机的浏览器，只需要兼容移动设备浏览器，现在移动设备浏览器几乎能全部兼容，除了微信的内置浏览器，现在就是在解决这个问题呢

张运领 2014-01-11

打赏
举报

这个问题吧，你看看是不是因为固定定位惹得祸。把固定定位改成绝对定位，然后看看是不是能正常，如果能正常那就是微信浏览器不支持固定定位了。搜一下：IE6下解决固定定位。这个，看下IE6是怎么处理不支持fixed属性的。然后改到这边试试。还有，<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />这段去掉再试试。不要去强制定义浏览器的解析模式。

求助：有谁解决过微信内置浏览器不兼容浮动的

相关推荐