在国内的浏览器中，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 00px;

            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与相对定位在国内双核浏览器极速模式下的兼容性问题的更多相关文章

  1. 百度浏览器极速模式下访问 FastAdmin 的问题

    百度浏览器极速模式下访问 FastAdmin 的问题 兼容性问题,因为 https 证书配置时对低版本的浏览器不适配引起. 应该是 百度浏览器的内核太旧,没有更新导致.

  2. 【CKEditor ASP.NET】解决360安全浏览器极速模式下不显示

    博主问题只是出在误删了style.js文件 首先我用的是这种模式,在单个页面上导入: <%@ Register Assembly="CKEditor.NET" Namespa ...

  3. 解决360、猎豹浏览器等极速模式下css3兼容问题

    有时候你会发现你写的animation动画的css3效果,在IE.谷歌.火狐等主流的新版本的浏览器的是没有什么兼容问题的,即便你不写前缀,也是可以显示动画效果的.然后,你本地在360浏览器或猎豹浏览器 ...

  4. 360浏览器兼容模式下jsp页面访问不到js文件

    360浏览器兼容模式下jsp页面访问不到js文件 查看自己js中的语法问题,不要用ES6的语法,编译不了故找不到js文件 const var of 码出高效 java 比较 所有整型包装类对象之间值的 ...

  5. HTML页面中启用360浏览器极速模式

    今天做页面突然遇到浏览器一直在兼容模式下运行,体验不好,通过查询文档,在<head>中加入<meta name="renderer" content=" ...

  6. 【踩坑】360安全浏览器“极速模式”和“兼容模式”，套路还是bug？

    分享踩坑点: 项目中需要兼容360安全浏览器,大家当然都希望用极速模式打开网站,但是发现总是被兼容模式打开 网址类似 aa.xx.dd.com 网上找了很多地方,有以下两种方法 1.<meta ...

  7. CSS hack 360浏览器 极速模式与兼容模式

    自动切换浏览器模式对于360浏览器7.1版本有效,8.1无效 <%@ Page Language="C#" AutoEventWireup="true" ...

  8. 360浏览器兼容模式下IE内核版本

    问题 最近在跟客户演示系统时,自己电脑IE 11下好好的,我们web系统最低支持到IE9.在客户电脑上,IE9浏览器下可以正常浏览,但是360兼容模式下,页面什么也不显示. 通过F12调试工具发现,3 ...

  9. QQ浏览器兼容模式下Cookie失效 导致的NetCore Cookie认证失效

    最近在写NetCore项目采用的是NetCore的Cookie认证.结果偶然发现QQ浏览器登录不好用.这里先需要了解一下set-cookie中的SameSite属性  导致原因 首先Fiddler 4 ...

随机推荐

  1. HTML DOM--基础概述

    DOM: Document Object Model(文档对象模型)的简写,那么,这是一种什么样的模型,简单点来说,就是将文档当成了一棵树.它独立于平台与语言,允许程序与脚本动态地访问.更新文档的结构 ...

  2. js 的常用方法和对象

    每日分享: 加油!你一定可以!你是最牛逼的!!!-------------------------------------------------------------------------- - ...

  3. turtle库笔记

    turtle库是学习python的一个重要数据库,在当下是一个很有趣流行的绘制图像的数据库,她把画笔想象为一只小乌龟在爬行,让小乌龟在一个以横轴为x,纵轴为y的画布上行驶,并且会有多样的行驶角度,速度 ...

  4. vue项目里登录界面实现回车登录

    全局监听enter键,是把监听事件绑定到document上,无需获取焦点之类的 created() { let that = this; document.onkeydown =function(e) ...

  5. 关于typedef的用法

    参考:http://www.cnblogs.com/csyisong/archive/2009/01/09/1372363.html https://wenda.so.com/q/1471668835 ...

  6. Python处理文件和查漏

    import os,re def change_filename(root): ''' 批量修改excel文件名 ''' for root_,_, fs in os.walk(root): for f ...

  7. selenium+JDBC实现参数自动化测试

    测试模拟环境:在www.1905.com网站中执行两个用户的登陆退出操作 需要的文件有: 1.User的实例类: public class User { private String username ...

  8. ztree树样式的设计

    ztree的功能虽然很是强大,但是唯一有一点就是样式有点普通,所以如果我们需要修改样式,那么就只能进行样式重新覆盖了 样式代码,这些都是根据实际样式进行覆盖 /** * tree的选中样式 */ .c ...

  9. <? extends A> 和 <? super A> 的意思

    /** * @author Lee Boynton * @author Arthur van Hoff * @author Martin Buchholz * @author Ulf Zibis * ...

  10. c#异步编程async await

    可以代替协程了 但是需要.net4 版本 unity2017以上版本可以用了 再也可以不用蛋疼的没有返回值的协程了 //异步编程,和Task一起用 async void TestAsync(){ // ...