在国内的浏览器中，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. vue Vue-cli 笔记

    之前用vue写项目都是用的es5,这几天看到小右弄了个命令行工具打算试水一下es6.结果老是报错,但是可以正常编译,虽然我不是处女座但是看到报错很不舒服.结果发现源代码最后一行要空一行,我心想这什么狗 ...

  2. 2016级算法第一次练习赛-A.群鸦的盛宴

    858 群鸦的盛宴 题目链接:https://buaacoding.cn/problem/858/index 思路 本题乍一眼看过去,你可能会想到使用一个二维数组A[51][51]来记录从i到j的路线 ...

  3. 【关于selenium自动化中，Webdriver的原理以及工作流程】

    原文地址:https://www.cnblogs.com/imyalost/p/7242747.html#4109245 作者:老 张 1.关于Webdriver 设计模式:按照Server-Clie ...

  4. Machine learning 吴恩达第二周coding作业(必做题）

    1.warmUpExercise: function A = warmUpExercise() %WARMUPEXERCISE Example function in octave % A = WAR ...

  5. 自己动手——快速搭建Android应用服务器

    1.服务器搭建方案选择 我们用:MySQL + Java Web + Tomcat + Volley 来实现我们的服务器. 其中:①MySQL是开源的数据库软件:②Java Web是遵循Java语言风 ...

  6. 分布式文件系统之FastDFS

    环境引入: 在一个大型的教育官网,会拥有大量优质的视频教程,并且免费提供给用户去下载,文件太多如果高效存储?用户访问量大如何保证下载速度?分布式文件系统是解决这些问题的有效方法之一 一.什么是文件系统 ...

  7. Sum(欧拉降幂+快速幂)

    Input 2 Output 2 Hint 1. For N = 2, S(1) = S(2) = 1. 2. The input file consists of multiple test cas ...

  8. python2.x提示这个错误：UnicodeDecodeError: 'ascii' codec can't decode byte 0xe8 in position

    查了好久下面这个方法可用: 发现应该是因为python2.x的默认编码是ascii,而代码中可能由utf-8的字符导致,解决方法是设置utf-8. 找到出错的文件,在import后增加下面几行: #! ...

  9. Python+Selenium之常用模块

    要用webdriver:from selenium import webdriver eg: driver = webdriver.Chrome()      driver.maximize_wind ...

  10. 新建IP核为灰色并显示there is no project open

    问题: ise显示there is no project open. “You may browse the IP Catalog but you will not be able to genera ...