在国内的浏览器中，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. java 上传文件大小转换为 GB/MB/KB/B

    1.工具类 package cn.cmodes.common.utils; import java.io.File; import java.io.FileInputStream; import ja ...

  2. vi基本状态

    vi状态退出并保存:shift+ZZ vi readme.txt 进入VIM编辑器,可以新建文件也可以修改文件 如果这个文件,以前是没有的,则为新建,则下方有提示为新文件. 按ESC键 跳到命令模式, ...

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

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

  4. 【算法笔记】B1049 数列的片段和

    1049 数列的片段和 (20 分)   给定一个正数数列,我们可以从中截取任意的连续的几个数,称为片段.例如,给定数列 { 0.1, 0.2, 0.3, 0.4 },我们有 (0.1) (0.1, ...

  5. Linux Mint下FireFox安装Adobe Flash Player

    最近在为自己的家里一台很老的机子(由于微软不再支持windows,windows10什么的不是这个老机子可以带的起来的233)选择一个合适的linux系统安装.看来看去,最终选择了排行很靠前,感觉也不 ...

  6. Linux串口驱动程序设计

    1. 在Linux系统中,终端是一类字符型设备,它包括多种类型,通常使用tty来简称各种类型的终端设备. (1)串口终端(/dev/ttyS*):串口终端是使用计算机串口连接的终端设备.Linux把每 ...

  7. Linux下与Windows下开发软件

    Linux下开发程序可以完全发挥自己的聪明才智,因为系统内核是完全开放的.Windows下开发程序就稍微郁闷一点,不论何种语言都必须在调用系统API的基础上开发,因为系统内核是不开放的. 这两种系统正 ...

  8. github创建本地库后关联远程库

    在进行新项目开发时,有时候并不一定先创建远程库,而是先在本地将项目创建,到一定阶段后再与远程库关联.下面步骤解决本地库与远程库在这种情形. 1. 初始化本地库,既然项目已经创建了,相信这个也已经知道了 ...

  9. openerp学习笔记 对象间关系【多对一(一对一)、一对多(主细结构)、多对多关系、自关联关系(树状结构)】

    1.多对一(一对一)关系:采购单与供应商之间的关系 'partner_id':fields.many2one('res.partner', 'Supplier', required=True, sta ...

  10. android viewpager 拿到当前显示的 fragment 的实例

    一个 ViewPager 通过 FragmentPagerAdapter 绑定了 3 个 fragment 可以通过 Fragment fragment = getSupportFragmentMan ...