在国内的浏览器中，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-★★★★JavaScript的DOM操作★★★★-重点部分

    Window.document 对象 一.找到元素 document.getElementById("id"); 根据id找,最多找一个: var a = document.get ...

  2. Codeforces Round #556 (Div. 2) - C. Prefix Sum Primes（思维）

    Problem  Codeforces Round #556 (Div. 2) - D. Three Religions Time Limit: 1000 mSec Problem Descripti ...

  3. jenkins 判断是手动触发还是定时器触发

    根据变量BUILD_CAUSE的值可以判断本次触发是手动触发还是定时器触发 手动触发:MANUALTRIGGER 定时器触发:TIMERTRIGGER

  4. 编写高质量代码:Web前端开发修炼之道（二）

    第四章:高质量的css 1)怪异模式和标准模式 在标准模式中,浏览器根据规范表现页面:而怪异模式通常模拟老式浏览器的行为以防止老站点无法工作. 他们两者之间的差异比较典型的表现在IE对盒模型的解析:在 ...

  5. [原创]SSH密钥访问Git仓库配置

    SSH密钥并非为了解决拉取git仓库代码时,需要频繁输入密码的问题. SSH是一种比较安全的协议,可以用来免去远程登录Linux等服务器时需要输入密码的繁琐过程. 命令: ssh user@serve ...

  6. 2018牛客多校2 - J farm 随机乱搞/二进制分组

    题意:给定n*m的格子,每个格子有不同的种类,q次操作,每次操作使[x1,y1]到[x2,y2]的格子除了k类型的以外都删除,最后单次询问所有格子被删了几个 官方题解提到了两种有意思的做法,随机和二进 ...

  7. [转] 公共DNS,114.114.114.114和8.8.8.8

    [From] https://zhidao.baidu.com/question/304558434158495364.html 一.两者的联系 114.114.114.114和8.8.8.8,这两个 ...

  8. ABP相关网站

    ABP的官方网站:http://www.aspnetboilerplate.com ABP在Github上的开源项目:https://github.com/aspnetboilerplate 系列文章 ...

  9. 使用Session监听器实现统计在线人数

    使用Session监听器实现统计在线人数 1.工作目录结构 包含监听器类和jsp页面 2.session监听器 首先利用session监听器来实现对访问网站时的session计数,当有session创 ...

  10. Linux工具安装配置之Oracle

    对于Oracle的安装真的是心生恐惧,特别是一堆堆的依赖包.趁这次DBA在南京,实际操作一番. 两种方式,1.全新安装:2.硬拷贝 全新安装,参考下面这个介绍 http://www.cnblogs.c ...