display:flex与浏览器兼容的问题解决方案

最新推荐文章于 2022-11-10 16:54:12 发布
最新推荐文章于 2022-11-10 16:54:12 发布
阅读量7.3k 收藏 5
点赞数 2
文章标签： 浏览器兼容 弹性盒子
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lx_567/article/details/101266443
版权

浏览器兼容问题：

<meta name="renderer" content="webkit"/>
<meta name="force-rendering" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<script>/*@cc_on window.location.href="http://support.dmeng.net/upgrade-your-browser.html?referrer="+encodeURIComponent(window.location.href); @*/</script>

强制运行浏览器的版本

下面这句是精髓

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>


*说明：这里不是从弹性盒子的角度去处理的，而是从浏览器的角度，就是改变浏览器内核，强制运行高版本浏览器*
Lx_567
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
display: flex弹性布局
10-12
display: flex弹性布局
解决浏览器不支持display:flex的问题
单调枯燥的CC的博客
06-11 5096
在本地测试的 display:flex;布局没问题，但是目标升级的浏览器的Chrome版本较低，不支持该布局。 查看控制台： 解决办法： 兼容各浏览器的写法 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+, Oper
部分低版本浏览器中flex布局孙子元素高度设置100%失效-终极解决方案
JCAL123的博客
11-10 772
部分低版本浏览器中flex布局孙子元素高度设置100%失效-终极解决方案。
# css学习（一） display:flex
m0_57330841的博客
03-07 160
** css学习（一） display:flex ** 这个系列将分享css一些实用知识，适合已经了解css但不熟悉css开发的小伙伴学习。 display:flex就是一个功能十分强大的布局方式，叫做弹性容器(container) 顾名思义，它具有弹性，可以伸缩，因此很多简单布局可以直接使用这个布局方式。 对于一个div的css定义了这个熟悉，那么这个盒子就可被称作为弹性盒子，它的子元素自动成为它的项目(item) 容器有两条轴，分别为默认的水平的主轴，以及竖向的相交竖轴 这个容器为项目提供六个属性 fl
css经典布局以及兼容性
秋来九月八
03-18 1142
不需要根据内盒子的高度调整样式，但是兼容性只能满足主流浏览器及其版本，存在一定的兼容问题。transform的兼容性限制，ie9就会出现问题。的吸顶效果兼容性不好。vertical-align的兼容性还是可以的，总的来说这套方案兼容性很好。flex也存在一定的兼容性问题，不兼容ie9，兼容性不如calc。底部无论整体的内容有多高，底部始终出现在页面的最底部。float的兼容性没得说，calc是这种用法的限制。优点是兼容性较好，缺点是必须知道子组件的宽高。postion的兼容性是这几个里面最好的。
解决display：flex布局出现的问题
weixin_48687415的博客
03-18 2184
1.页面实现过程中，有时候会希望页头或者页尾fixed固定布局，但是固定布局之后，会将元素的一些内容遮挡掉 原因：使用了display：fixed布局之后，元素会浮动起来，不再占有以前的位置，解决的方法就是在这个元素外层在包裹一个等高度的元素，外层元素只需要设置一个高度就可以了，里面的内容元素按照样式设置就行 ...
Flex Web部分浏览器兼容问题解决
布丰的专栏
06-05 7755
今天找了一天这个项目的兼容性的问题，好在功夫不负有心人啊，都解决了 照理来说Flex应该没什么兼容性的问题的，但是我做的这个web应用却是有那么几个问题，在IE8内核的电脑上会出现，部分360浏览器也是 第一个问题： Flex页面显示不全，由于在我的应用中需要的面积比较大，所以没有用自适应大小，设了minWidth="1000" minHeight="710"这两个属性 但是在360等浏览
flex布局(弹性盒)兼容性写法 兼容ie10 谷歌 火狐
希文Gershwin
08-19 8401
1.容器写法 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 */ di...
详解CSS中的display:flex||inline-flex属性
09-27
主要给大家介绍了CSS中的display:flex和display:inline-flex属性，文中分别通过两段实例代码给大家介绍了display:flex和display:inline-flex的使用效果，感兴趣的朋友们可以参考借鉴，下面来一起看看吧。
flex布局兼容性问题小结
01-21
一.W3C各个版本的flex 2009 version 标志：display: box;...标志：display: flex/inline-flex; and flex-{*} properties 2014 version 新增了对flex项z-index的规定 2015 W3C Editor’s Draft 没有大的改动
display：flex布局语法
11-20
flex 弹性盒子布局语法，关于廖雪峰老师网站学习笔记的分享，
flex 弹出窗口被ie拦截
小点滴
01-18 1185
    flex弹出新页面    var strUrl:URLRequest = new URLRequest("http://www.sina.com.cn");// http://是必须的    //这个会被ie拦截，参数是URLRequest的    navigateToURL(strUrl,"_blank");    //navigateToURL弹出页面（_blank）时会被ie拦截，    //可以把html页面的flash的参数, wmode的值定义成transparent，用js方法调用新页
flex弹性盒布局在ie浏览器中的那些兼容性问题
学思QAQ的博客
01-13 2609
1，在IE10和IE11中，父容器中flex-direction:column 和 align-items:center，这俩属性同时存在， 子容器内容过多会溢出容器。 解决方案：给子容器加max-width: 100% 2，IE10和IE11下，父容器flex-direction:row，子容器内容过多会溢出容器 解决方案：给子容器加max-width: 100% 3，IE11中，父容器flex-direction:column，img无法保持宽高比缩放 ...
Flex 布局在各家浏览器下的一些bug，尤其是IE
weixin_30240349的博客
07-09 602
Safari 10 and below uses min/max width/height declarations for actually rendering the size of flex items, but it ignores those values when calculating how many items should be on a single line of a ...
flex上传带中文参数，但是在后台转换成中文时，IE内核的浏览器可以成功，但是火狐和谷歌等不行。解决方案
xwnsy86276的专栏
03-21 610
tomcat配置了                  connectionTimeout="20000"                redirectPort="8443" URIEncoding="UTF-8"/> 项目web.xml配置了         Chinese       org.springframework.web.filter.Character
Flex布局的兼容性
yhmdsg的博客
03-23 702
写在前面flex布局早在2009年就有了，而现在是2015年6月8日，使用最新的flex语法会发现支持程度并不好，即使是在“高端”浏览器上也是如此，比如Chrome、Firefox、Safari、Android、IOS Safari下支持程度各不相同网上现有的代码中充斥着各种版本，在Chrome下运行一般都没有问题，Firefox一般也还好，但Android与IOS Safari下就显得非常无力了。
display:flex兼容写法
hmily43的博客
11-06 1187
<style type="text/css"> *{margin:0;padding:0} .conbox{ margin:0 auto; width:800px; height:500px; background:#CCCCCC} .list{box-sizing:border-box;width:200px; height:100px; background:#FFCCCC;bor...
display:flex和display:box布局浏览器兼容性分析
weixin_30361641的博客
10-25 583
display:flex和display:box都可用于弹性布局，不同的是display:box是2009年的命名，已经过时，用的时候需要加上前缀；display:flex是2012年之后的命名。在实际的测试中display:flex不能完全的替代display:box。display:flex的浏览器兼容性比较麻烦。 1.关于display:flex 对于响应式布局，使用flex很方便，但是...
display: flex;兼容所有浏览器写法
最新发布
08-15
要实现 `display: flex;` 的兼容写法，可以使用以下方法： ```css .my-element { display: -webkit-box; /* Safari 6-9 */ display: -ms-flexbox; /* IE 10 */ display: flex; /* 标准语法 */ } ``` 使用上述写法，可以在大多数现代浏览器中实现 `flex` 布局。具体解释如下： - `-webkit-box`：适用于 Safari 6-9 版本的浏览器。 - `-ms-flexbox`：适用于 Internet Explorer 10 版本的浏览器。 - `flex`：适用于符合标准的现代浏览器。 通过在 `display` 属性中使用这些不同的值，可以确保在各种浏览器中都能正确显示 `flex` 布局。 需要注意的是，这只是一个示例，实际使用时可能还需要考虑其他兼容性问题，并根据具体情况进行调整。如果你需要更全面的兼容性解决方案，建议使用 CSS 预处理器（如 Sass 或 Less）或使用相关的 CSS 库（如 Autoprefixer）来自动处理兼容性问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值