嵌套的flexbox包装在IE11和Safari中不起作用
嵌套的flexbox在IE11和Safari中不起作用的原因是因为这两个浏览器对flexbox布局的支持存在一些限制和兼容性问题。
在IE11中，它使用的是旧版的flexbox实现，即"display: -ms-flexbox"。这个旧版实现与现代的flexbox规范存在一些差异和限制，导致嵌套的flexbox布局无法正常工作。解决这个问题的方法是使用其他布局方式，如传统的float布局或者使用flexbox的替代方案，如CSS Grid布局。
在Safari中，虽然它对flexbox布局的支持较好，但在某些情况下，嵌套的flexbox布局可能会出现问题。这可能是由于Safari对flexbox规范的解释和实现方式与其他浏览器存在细微差异所导致的。解决这个问题的方法是尽量避免使用嵌套的flexbox布局，或者通过调整布局结构和样式来解决兼容性问题。
总结起来，嵌套的flexbox在IE11和Safari中不起作用的解决方法如下：
- 对于IE11，可以考虑使用传统的float布局或者CSS Grid布局来替代嵌套的flexbox布局。
- 对于Safari，尽量避免使用嵌套的flexbox布局，或者通过调整布局结构和样式来解决兼容性问题。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
- 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iotexplorer
- 腾讯云区块链服务（Tencent Blockchain）：https://cloud.tencent.com/product/tencentblockchain
相关·内容
我正在尝试在flexbox中创建一个嵌套的导航栏，并且我喜欢支持IE11。我在.navbar上使用flex-direction: row；和flex-wrap: wrap；。我在.nav项目上也做了同样的事情。在Chrome和火狐上似乎一切正常，但在IE11或Safari上就不行了。
在IE11和Safari中，当我缩小屏幕时，.navbar<e
浏览 3提问于2017-07-10得票数 0
我在Safari、IE11和IE10中使用嵌套的flexbox时遇到了一些问题。这些面板应该是并排的(50%宽度)，并且其中有不同数量的内容。<cite>元素应该锚定在面板的底部，并且每个面板应该具有相同的高度。下面是一个要说明的代码：
这在Chrome / Firefox上运行得很好，但在Safari、IE10和I
浏览 0提问于2016-03-03得票数 3
1回答
我遵循了一个教程，它似乎正确地显示在火狐v33 (桌面)，IE11和Chrome v39，但它没有正确地显示在移动Safari 7或8-看看我的，或html/css以下。为什么移动Safari对此的处理与其他浏览器不同，我的选择是什么？我已经试过了flexbox，这在移动Safari中也不起作用。我知道垂直对中可能很棘手。我是否应该放弃，把以元素为中心的
浏览 0提问于2014-11-24得票数 0
回答已采纳
2回答
我必须修复这个布局，它是flexbox、表格布局和绝对定位的杂乱组合。有人能帮我解决这个问题吗？这里的约束是必须维护flexbox .container和表
浏览 0提问于2018-09-18得票数 1
我有一个HTML结构，其中有几个使用flexbox布局的列表项，其中有几个元素，我正在使用一个嵌套的flexbox进行布局。在Chrome、IE11和Edge中，由于Flexbox和height: 100%，所有列表项的高度都是有效匹配的。提交按钮(“添加到篮”)因此垂直对齐。然而，在Safari (桌面，ver9.1.2)中，height: 1
浏览 1提问于2016-09-08得票数 4
回答已采纳
我需要将(嵌套的)元素对齐到其容器元素的垂直中心，但是当嵌套元素比容器高时，容器需要从嵌套内容的顶部开始滚动(而不是从顶部延伸)。我正在寻找一个快速解决这个问题的方法，但是我在搜索结果中遇到了很多噪音，不管我去哪都行。理想情况下，解决方案将使用Flexbox，但只要所有的解决方案都能在所有目标浏览器中工作，任何解决方案都是受欢迎的。这需要在IE11、Edge和当前
浏览 1提问于2018-07-09得票数 0
在将safari ( 10.1.1)和mac os (塞拉利昂)升级之后，列包装不再适用于具有最小宽度设置的项目列表。我尝试过在子节点上设置各种flex属性，但是safari似乎无法在设置这些属性之后将它们封装在列中。它在我需要支持的其他浏览器中工作，并且在10.0.1版本的safari中工作。我制作了一个代码页，它模拟当前站点上的代码-
重要的是-你需要这些-
浏览 1提问于2017-05-23得票数 1
回答已采纳
1回答
我在上有一个柔性盒网格，它在IE11和Firefox中显示不正确。</div>flex在Chrome中正确显示，但在IE和Firefox中，项目保持在一行，不包装。为什么会这样呢？
浏览 2提问于2016-01-25得票数 0
回答已采纳
2回答
我将Twitter引导3.2中的显示输入组的方式从display: table改为display: flex，但我不确定哪些CSS前缀是支持旧浏览器所必需的。我现在的代码是： display: -webkit-flex; display: -ms-flexauto; -ms-flex: 1 0 auto;
flex: 1 0 a
浏览 2提问于2014-10-22得票数 1
回答已采纳
在Chrome、Safari和Firefox中，我使用的调用如下：date.toTimeString().match(/\((.*)\)/)&q
浏览 4提问于2015-11-12得票数 4
回答已采纳
首先，我要说的是，不幸的是，我仍然必须支持IE11，我不认为这是一个重复的问题，尽管我已经找到了一些类似的问题。
我有一个简单的模式窗口，其中包含3个灵活的组件在一个列，页眉，页脚和主要。我们的计划是，外框应该随着内容的增长而增长，直到它达到屏幕高度的80%，在这一点上，设置为overflow-y:auto的模式的中间部分应该会有一个滚动条，而主模式不会再变高。模式设置为flex，
浏览 11提问于2016-08-04得票数 2
2回答
我在Safari中使用flexbox时遇到了问题，我在这些页面上找不到适合我的解决方案。.flexbox {
display: -webkit-flex; /* S
浏览 1提问于2015-10-05得票数 2
1回答
我尝试在页面重定向上显示加载器动画，重定向是通过表单提交启动的。但是动画在Safari和IE中不起作用。我已经尝试过CSS关键帧动画，GIF和视频都不起作用。GIF和视频没有播放，它只是显示静态图像。在Safari和IE11中遇到这个问题。
浏览 27提问于2019-12-20得票数 0
当涉及到响应性设计时，可以在使用ul和div元素之间进行选择。这个问题是关于导航栏的。
浏览 4提问于2016-02-26得票数 1
回答已采纳
我有一些嵌套的flexbox布局，它们在Chrome和Safari 11+中工作得很好，但在Safari10.1.2中表现不正确<div class="cont
浏览 4提问于2017-10-28得票数 1
我的react应用程序不是在11上工作，它在边缘和铬上工作得很好。当我通过Node.js连接我的应用程序时，响应构建文件夹它可以很好地工作IE11和9。通过节点服务器端口它正在工作。现在我使用的是spring引导，但是它在IE11和9中不起作用，我已经在IIS中部署了我的react应用程序。
我已经通过npx create-react-app.(创建了我的应用程序，在其他类似问题<
浏览 5提问于2019-08-09得票数 2
3回答
我真的被困在试图弄清楚这一点--我正试图在一个在悬停时出现在图像上方的响应性div中，在垂直和水平两个方面进行文本处理。
这是一个基本的和CSS结构。我尝试过许多不同的CSS方法--使用table (因为我使用absolute获得图像上方的文本，使用transform: translate(-50%, -50%); top: 50%; left: 50%;来抵消文本)，以及其他我目前没有回忆的方法。主要的问题是，我有两个“层”-文本和
浏览 2提问于2015-05-29得票数 0
回答已采纳
在我正在构建的这个网页上，有一堆画布，在特定的时间，我用canvas[0].remove()移除其中的一幅。虽然这在Chrome和Opera中运行得很好，但在和Safari中却不起作用。使用IE11，Safari5.1.7
浏览 3提问于2014-07-24得票数 2
回答已采纳
1回答
在我的react应用程序中，我向java后台发送了一个请求。但是当IE11和Safari发送请求时，后台无法获取authorization头部，可以获取其他头部。我试着把Access-Control-Allow-Origin和withCrendentials放在axios中。但不起作用。httpRequest.getHeader("abc") -> "abc"
httpRequest.getHeader(&
浏览 26提问于2019-10-28得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
