flex与相对定位在国内双核浏览器极速模式下的兼容性问题

在国内的浏览器中，360浏览器，QQ浏览器等绝大部分都是双核浏览器。双核浏览器即拥有IE兼容内核和非IE极速内核两个内核，分别对应兼容模式和极速模式。兼容模式时使用IE内核，极速模式采用webkit内核。而目前大部分网站为了性能和用户体验，默认使用极速模式。在极速模式出现问题时，使用兼容模式。

虽然极速模式是使用的webkit内核，但是浏览器的表现却还是有一定差异。平时使用Chrome调试，在极速模式下却表现的不正常。

好，进入正题。flex是目前前端布局中一个非常好的属性，这里不多说，可以看大神介绍http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

而在工作中发现了一个问题，flex和相对定位配合使用时：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Test</title><style>html,body{margin:0;padding:0;width: 100%;height: 100%;}.wrapper{position: relative;width: 100%;height: 100%;background-color: #fff;display: flex;flex-direction: column;}.flex-1{flex: 0 0 500px;background-color: #dfdfdf;}.flex-2{flex: 1;}.circle{position: relative;left: 50%;top: 50%;margin: -100px 0 0 -100px;width: 200px;height: 200px;border-radius: 100px;background-color: #52caff;}</style>
</head>
<body>
<div class="wrapper"><div class="flex-1"＞　　　　<div class="circle">　　</div> 　　<div class="flex-2"> </div> </div> </div> </body> </html>

代码在flex-2中居中画了一个圆，chrome表现很正常，如图

但是在360极速下，却是这样的：

找了一下原因，圆在竖直方向上的相对定位没有生效，即：“top:50%”没起作用；

为什么没作用呢，我认为是div.flex-1没有显式的写出高度，"flex:0 0 500px"是flex属性的缩写，

，换一种写法就可以搞定:

其实就是给div定个高度。而这个时候又在考虑，高度不定的情况下怎么办？

用css3 calc()？这样的话遇到flex子区域有相对定位时flex就没有使用必要了。虽然遇到的问题解决了，但似乎又来了新的问题。

国内浏览器兼容模式下为什么会表现的不一样。。。。。。。。。。。。。

一个类似的问题，假如父元素设置flex,子组件一个高度固定，一个变化，其中固定高度子元素只写高度height，在chrome中表现正常，在ｉｅ内核浏览器中会出问题，高度并不能表现出来，必须的给个flex属性。

从以上两个问题可以看出：　在父元素使用display: flex;时，最稳妥的就是子元素即设置 flex属性，又设置高度。

flex与相对定位在国内双核浏览器极速模式下的兼容性问题相关推荐

360浏览器5兼容模式吗_Vue-cli项目，打包生产模式，部分用户360浏览器极速模式下奔溃...
一直使用macOS系统下chrome浏览器下开发,仅仅使用到ant design pro vue 组件库,默认的脚手架配置. 客户使用win7下360安全浏览器访问,自动变成"兼容" ...
vue使用npm不会自己加到plugins_Vue-cli项目，打包生产模式，部分用户360浏览器极速模式下奔溃...
一直使用macOS系统下chrome浏览器下开发,仅仅使用到ant design pro vue 组件库,默认的脚手架配置. 客户使用win7下360安全浏览器访问,自动变成"兼容" ...
swiper在360浏览器极速模式下图片第一次加载不出来的坑
废话不多说直接上代码 .lunbo1 {width: 1170px;height: 200px;/*height: 100%;*/margin: 30px auto 0 auto;/*overflow ...
360安全浏览器极速模式对rem失效
360浏览器最小字体默认跟ie和chrme不统一 (截止 2020/11/18) 由于我的 rem:px 换算率较小 10:1 导致在360浏览器极速模式下字体大小生效,块级盒子元素大小是不变化的遇 ...
UC浏览器怎么将mht转HTML,极速模式下的MHT
Chrome内核浏览器在"极速模式"下,网页无法被保存为单个文件的MHT格式[.mht],单文件只能保存为HTML[.html/.htm]格式,且仅限文本,不含图片&视频. ...
设置网页默认为360浏览器极速模式打开
设置网页默认为360浏览器极速模式打开在head标签中添加一行代码: <html> <head> <meta name="renderer" con ...
360浏览器极速模式自动_浏览器正在为网站带来自动暗模式
360浏览器极速模式自动 nalyvme/Shutterstock.comnalyvme / Shutterstock.com Dark mode is now everywhere, includi ...
FLASH透明在360浏览器遨游浏览器等极速模式下失效解决办法
360浏览器极速模式.遨游浏览器.firefox等浏览器 flash无透明了!<param name="wmode" value="transparent" ...
【踩坑】360安全浏览器“极速模式”和“兼容模式”，套路还是bug？
分享踩坑点: 项目中需要兼容360安全浏览器,大家当然都希望用极速模式打开网站,但是发现总是被兼容模式打开网址类似 aa.xx.dd.com 网上找了很多地方,有以下两种方法 1.<meta ...

flex与相对定位在国内双核浏览器极速模式下的兼容性问题

flex与相对定位在国内双核浏览器极速模式下的兼容性问题相关推荐

最新文章

热门文章