在国内的浏览器中，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. linux开机、重启和用户登陆注销

    关机&重启命令 基本介绍: shutdown –h now    立该进行关机 shudown -h 1 "hello, 1 分钟后会关机了" shutdown –r no ...

  2. 基于MODBUS的CRC

    %ws   WCHAR wszName CRC原理 设编码前的原始信息多项式为P(x),P(x)的最高幂次加1等于k:生成多项式为G(x),G(x)的最高幂次等于r:CRC多项式为R(x):编码后的带 ...

  3. post调试postman

    载地址:https://www.getpostman.com/ 教程地址:http://www.cnblogs.com/s380774061/p/4624326.html

  4. try-catch里面加了return后，finally还会执行吗？

    请看下面的方法,在我们的catch里面,捕获到了异常之后,我们的catch模块里面的语句,还会接着执行,当我们执行到return之后,我们不会立即返回,而是会接着执行finally块里面的代码,只有执 ...

  5. 04-oracle时间函数

    add_months(sysdate,x)x月之后的日期:last_day(sysdate)指定日期所在月份的最后一天:next_day(sysdate,'星期x')当前日期后的下一个星期x: mon ...

  6. Javascript面向对象编程（转）

    http://blog.csdn.net/lmj623565791/article/details/29210679 其实,从这个面向对象编程的例子来看,思路还是很清晰的. 第一步: 构造函数,用于初 ...

  7. Oracle PL/SQL编程之基础

    1.简介:pl/sql块由三个部分组成:定义部分.执行部分.例外处理部分,如下所示: declare: /*定义部分---定义常量.变量.游标.例外.复杂数据类型 begin /*执行部分---要执行 ...

  8. Oracle 数据库名、实例名、Oracle_SID

    本文参考自ORACLE 数据库名.实例名.ORACLE_SID的区别,纯属读书笔记,加深记忆 在ORACLE7.8数据库中只有数据库名(db_name)和数据库实例名(instance_name).在 ...

  9. Clojure编写一个阶乘程序 使用递归

    这是递归 (def f     (fn fb     [x]    (if (< x 2)      1      (* x (fb (- x 1)) )     )        )  ) ( ...

  10. 移动前端 HTML5 head

    移动前端不得不了解的HTML5 head 头标签(2016最新版) 发表于 2016年10月20日 by 愚人码头 被浏览 875 次 小编推荐:掘金是一个高质量的技术社区,从 ECMAScript ...