flex布局 兼容国内浏览器的双核模式

最新推荐文章于 2023-02-05 22:12:26 发布
最新推荐文章于 2023-02-05 22:12:26 发布
阅读量502 收藏 1
点赞数
分类专栏： html，css 相关知识
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cxz792116/article/details/80678242
版权
本文探讨如何在Flex布局中确保兼容国内浏览器的双核模式。尽管低版本IE内核不支持Flex，但大部分国产浏览器默认使用Chrome内核。通过设置特定指令，可以控制浏览器使用最新内核并采用标准模式渲染页面，从而在用户切换到兼容模式时，如果系统IE版本为9及以上，仍能正确显示Flex布局。同时，对于IE用户，如果安装了Chrome框架插件，即使在较低版本的IE上，Flex布局也能正常工作。
摘要由CSDN通过智能技术生成

flex布局不支持低版本ie内核是确定了，没办法的改变的事实，但是国产浏览器采用哪一个内核打开你的页面，这个是你可以控制的。

在html的<head>标签中加入如下代码：
<meta name="renderer" content="webkit">

然后浏览器打开你的页面时，会默认采用chrome内核来渲染页面，这是360浏览器的功能，其他国产浏览器也支持。但是用户非要点击“兼容模式”怎么办？我们还可以控制浏览器调用的ie渲染引擎的版本。

在html的<head>标签中加入如下代码：<meta http-equiv="X-UA-Compatible"
最低0.47元/天 解锁文章
微微暖风
关注
专栏目录
大前端学习笔记--持续随缘更新
JackieDYH的博客
02-10 1194
目录 0210--前端知识&HTML常用标签 0210--前端知识&HTML常用标签 1、浏览器及内核介绍： chrome谷歌： 特点——简洁、快速、安全 内核——webkit,Blink 费用——收费 Firefox火狐——Mozilla公司： 特点——非盈利、Gecko项目开源 内核——Gecko Safari苹果——苹果...
flex布局兼容浏览器设置
weixin_39450432的博客
06-02 557
兼容写法： display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ / display: -moz-box; / Firefox 17- / display: -webkit-flex; / Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 / display: -moz-...
Flex布局新旧混合写法详解（兼容微信）
02-05 840
flex是个非常好用的属性，如果说有什么可以完全代替 float 和 position ，那么肯定是非它莫属了（虽然现在还有很多不支持 flex的浏览器）。然而在移动开发中，本来绝大多数浏览器（包括安卓2.3以上的自带浏览器）都支持的属性，偏偏有个例外，就是国产某某X5内核神器（不知哪个版本的webkit，仅支持 display:box），自主研发这东西也不好多说什么了，下面入正题。 首先还
flex与相对定位在国内双核浏览器极速模式下的兼容性问题
detang3660的博客
06-29 190
在国内的浏览器中，360浏览器，QQ浏览器等绝大部分都是双核浏览器。双核浏览器即拥有IE兼容内核和非IE极速内核两个内核，分别对应兼容模式和极速模式。兼容模式时使用IE内核，极速模式采用webkit内核。而目前大部分网站为了性能和用户体验，默认使用极速模式。在极速模式出现问题时，使用兼容模式。 虽然极速模式是使用的webkit内核，但是浏览器的表现却还是有一定差异。平时使用Chr...
flex布局在谷歌、火狐、360上正常，QQ浏览器上显示混乱
淹死的鱼的博客
08-05 1648
在浏览器IE，火狐，谷歌，360上使用flex布局都没有出现问题，但在QQ浏览器上运行时就出现了高度上的问题 /* 父级 */ .charts-box{ flex-grow: 1; width: 100%; height: 100%; } .charts-tit-box{ height: 50px; width: 100%; display: flex; font-size: 12px; } .charts-content-box{ fle
flex布局详细
FGGIT的博客
02-05 419
flex布局详细
前端基础总结--CSS
chenyouleww的博客
07-08 558
前端 1.1前端方向 所谓前后端本身就是 Web 开发中，为了区分在服务器上运行的和在浏览器上运行的东西而出现的定义。 前端开发的体系划分，在我看来，就是两种，第一种就是ui实现的，不重业务逻辑，动态交互的。第二种就是各种业务逻辑，动态交互，数据处理的。这是很明显区分你要做什么任务，以及开发时的顺序的。 一般的我们说前端都是小前端，就是web端。 大前端一般是指web端，小程序端，移动端（Android，iOS），Windows端，macOS端，Linux端 1.2前端的技术 前端能做什么？ 前端能做你上网
牛客网-精华专题-前端校招面试题目合集
qq_41254204的博客
02-01 2921
前端校招面试题目合集 501HTML HTML 浏览器页面有哪三层构成，分别是什么，作用是什么? 构成：结构层(structural layer)、表示层(presentation layer)、行为层 (behavior layer) 分别是：HTML、CSS、JavaScript 作用：HTML实现页面结构，CSS完成页面的表现与风格，JavaScript实现一些客户端的功能与业务 H...
web前端之CSS3
hu0708的博客
08-03 991
css3
Flex Web部分浏览器兼容问题解决
布丰的专栏
06-05 7893
今天找了一天这个项目的兼容性的问题，好在功夫不负有心人啊，都解决了 照理来说Flex应该没什么兼容性的问题的，但是我做的这个web应用却是有那么几个问题，在IE8内核的电脑上会出现，部分360浏览器也是 第一个问题： Flex页面显示不全，由于在我的应用中需要的面积比较大，所以没有用自适应大小，设了minWidth="1000" minHeight="710"这两个属性 但是在360等浏览
CSS3 弹性布局(flex)+fullpage插件 = 360浏览器官网案例(更新完毕)
前端一线搬运工的博客
05-23 1666
动画效果:文件布局:html代码:&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0&
弹性布局flex（兼容不同浏览器）
wulongren520qian的博客
11-20 9103
参考（借鉴网友和自己实现代码）：https://blog.csdn.net/u010130282/article/details/52627661 目前弹性布局比较流行使用，但是这种布局出现的时间有不同的版本  不同版本针对不同版本浏览器也就存在兼容问题 参考：http://www.webfront-js.com/articaldetail/48.html 但是更早版本的浏览器，还没有弹性布...
css3设置box-pack和box-align让div里面的元素垂直居中
02-08 156
在要加的元素里面添加这些样式 display: box;display: -webkit-box;display: -moz-box; -webkit-box-pack:center;-moz-box-pack:center;-webkit-box-align:center;-moz-box-align:center; 内容超出3行就隐藏显示省略号d...
flex布局浏览器兼容问题
JerryChen12138的博客
12-15 3979
布局、浏览器、flex
meta和title的顺序问题引起IE显示空白页
ChinFeng的专栏
07-02 1812
一个页面，在FF下显示正常，在IE下显示空白，完完全全的空白，没有报错，没有提示，本以为是服务器没开，结果查看空白页的源文件，又是可以看的，源文件完全正常，只能是IE解析的问题，那么是什么地方引起IE解析失败呢？      经过排除法排查，最后锁定，居然是meta和title顺序的问题： Java代码       管理页     "content-type" co
display : -webkit-box-inline 我见
weixin_30242907的博客
04-08 241
发现： 最近在做移动端的东西，说起移动端弹性盒子布局真是无往不利，用起来特别爽，我也是偶尔间发现的这个属性并且它的用法，在网上基本查不到这个属性的资料（个人看法）。如果没有听说过（display:box）的朋友建议去别人家的博客看看CSS3就可以直接command+w了，由字看意，是不是能联想到 display:inline 这个属性，不知道的可以看看我的上一篇随笔, 之所有在前面加上-we...
css:兼容ie的做法整理
lyx9611的博客
04-23 207
1、把需要在ie下生效的样式写到下面的媒体查询中 @media screen and(-ms-high-contrast:active),(-ms-high-contrast:none){ .class { /*样式代码块*/ } } 2、在所有的方法必须加上function ...
前端开发常见的浏览器兼容性问题？
孙叫兽的博客
07-29 1323
参考帖子1：https://www.cnblogs.com/angel648/p/11392262.html 参考帖子2：https://www.cnblogs.com/wxf-h/p/10513342.html
flex布局浏览器兼容性
最新发布
11-30
Flex布局是一种新的布局方式，它可以让我们更加方便地实现页面布局。下面是Flex布局在不同浏览器中的兼容性情况： - Chrome、Firefox、Safari、Opera、Edge等现代浏览器都支持Flex布局，且支持程度较好。 - IE10及以上版本也支持Flex布局，但需要使用-ms前缀。 - 在移动端，iOS 6以上版本的Safari和Android 4.4以上版本的浏览器都支持Flex布局。 因此，可以说Flex布局的兼容性非常好，几乎所有现代浏览器都支持。如果需要兼容IE10及以下版本，只需要加上-ms前缀即可。 下面是一个简单的Flex布局的例子： ```html <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </div> ``` ```css .container { display: flex; justify-content: space-between; } .item { flex: 1; margin: 10px; background-color: #ccc; } ``` 这个例子中，我们使用了Flex布局来实现一个容器和三个项目的布局。容器使用了`display: flex`来指定使用Flex布局，`justify-content: space-between`来指定项目之间的间距。项目使用了`flex: 1`来指定它们的宽度平分容器的剩余空间。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值