Flex (物化valign-wrapper)在IE中不起作用
Flex (物化valign-wrapper)在IE中不起作用。
Flex是一种CSS布局模型，用于创建灵活的盒子模型，使元素能够自动调整大小和位置。它是响应式设计和移动优先开发的重要工具。
在Flex布局中，valign-wrapper是一个用于垂直对齐子元素的类。它可以将子元素垂直居中对齐。
然而，由于IE浏览器的兼容性问题，Flex布局在IE中可能会遇到一些兼容性问题，特别是在处理垂直对齐时。IE浏览器对Flex布局的支持不如现代浏览器那么完善。
解决这个问题的一种方法是使用其他CSS属性和技巧来实现垂直对齐。以下是一些可能的解决方案：
- 使用传统的表格布局：将父容器设置为display: table，子元素设置为display: table-cell，并使用vertical-align属性来实现垂直对齐。
- 使用绝对定位：将父容器设置为position: relative，子元素设置为position: absolute，并使用top和transform属性来实现垂直对齐。
- 使用Flex的兼容性前缀：在IE中，可以尝试使用-ms前缀来启用Flex布局的兼容性。例如，将display属性设置为-ms-flex。
- 使用JavaScript库：如果以上方法仍然无法解决问题，可以考虑使用JavaScript库，如Flexibility或Polyfill.io，来提供对Flex布局的完整支持。
总结起来，由于Flex布局在IE中的兼容性问题，valign-wrapper可能无法正常工作。为了解决这个问题，可以尝试使用其他CSS属性和技巧，或者使用JavaScript库来实现垂直对齐。
相关·内容
<ul class="collection"> <span class="title">A</span><li class=&quo
浏览 5提问于2018-08-27得票数 0
回答已采纳
2回答
如何解决这个挠性盒垂直对齐问题？
、、、、
我正在使用物化框架。它工作的很好，但我想让所有的页面填充窗口(使用最小高度)。这似乎破坏了元素的垂直排列。这是我使用的CSS代码： display: -webkit-flex; display: flex; -ms-flex-align: center;}
这就是我用来调整元素大
浏览 2提问于2017-06-15得票数 1
回答已采纳
我正在使用materializecss，我希望我的DIV以干净的方式垂直居中，也许是materializecss？<div class="container"> <div class="col s12 infobox center"> <div class="card grey darken-3"&
浏览 11提问于2016-02-07得票数 2
Materialize-CSS: valign-wrapper和right-align可以在单个h5标记中一起使用吗？到目前为止，我观察到的是，当它们一起使用时，h5中的文本是垂直对齐的，而不是右对齐的。如果你知道如何做到这一点，请让我知道。
TIA Jagan
浏览 4提问于2018-02-08得票数 0
1回答
我正在使用物化CSS，并在我的网站上有几个模态。其中一些我想在加载特定的新页面时打开。一切都正常，然后我切换到一个固定的nav，突然打开命令不起作用了。<div class="nav-wrapper"> <div class="col s7 m2 valign-wrapperalt="" class="loginLogo">&
浏览 2提问于2018-07-25得票数 0
回答已采纳
我想要更多地控制在导航中均匀分布这些项目(顶部和底部的空间比图像中显示的空间更大)。下面是相关的代码(使用网格，这里不包括，以及Materialize中的" grid“模块，它为我格式化文本等提供了一些帮助)： .nav-side-wrapper { flex-direction: column; display: flex;
justify-content: space-arou
浏览 6提问于2019-04-16得票数 1
5回答
有没有一种方法可以将页脚保持在页面底部，即使没有很多内容？我遵循了物化页面上的说明，并在<header>、<main>和<footer>标记之间使用了所有的HTML。
浏览 8提问于2015-11-23得票数 14
回答已采纳
1回答
IE仍然被15.5%的网络用户使用，所以我想支持它，并且IE7中不支持物化。然而，我在最新的浏览器中测试它。/** Navbar mobile collapse **/下拉式菜单也不起作用，这无疑是一个JS问题。以下是我迄今尝试过的步骤：
将jQuery放在物化css和
浏览 7提问于2017-09-09得票数 1
基本上，在IE10中，当“方向”是一行时，一个p元素的文本比它的父元素宽，它将溢出，随后将其他兄弟元素推出容器。在列模式下，包装似乎工作得很好(你可以在Chrome中查看相同的jsfiddle，并看到它的行为符合预期)。; margin-bottom: 1em; -webkit-flex-flow: column;-ms-flex-dir
浏览 4提问于2013-05-29得票数 35
回答已采纳
我在IE中的flex遇到了一些问题：
但它只在Chrome和Firefox中做到了这一点。在IE中，它根本不起作用。
IE不支持flex-grow吗？
浏览 10提问于2014-06-25得票数 22
1回答
flex: unset和flex: none有什么区别？我还没有找到任何具体的文档来说明flex: unset的实际工作。而且，flex: unset似乎在IE11中不起作用。对于某些contenxt，我们最近在IE11上遇到了一个问题，其中有一些类.cta-button有flex: 1 0 auto，当我们添加类.flex-unset时，它设置了flex: unset并重写了<e
浏览 0提问于2019-04-02得票数 1
回答已采纳
本例中的LHS flex子进程具有1em填充，这将导致RHS溢出父进程：
<div style=&qu
浏览 0提问于2013-10-11得票数 34
1回答
问题是，在IE10中，行中列的宽度计算错误，它似乎添加了列边缘的宽度(总共80px)，但在火狐和Chrome中，它计算得很完美，适合1260px内的所有内容。你可以在jsFiddle - 上看到它.row { position: relative; display: box; display: -moz-flex
浏览 0提问于2015-04-10得票数 17
回答已采纳
3回答
我正在使用Bootstrap，并在这里重新创建了我的问题：
.square1 {}.square1 { display: inline-block;}
background-color: blue; width: 300px;} <
浏览 1提问于2016-09-06得票数 1
回答已采纳
3回答
我尝试在flex中使用vmax，但是它在IE中不起作用，即使在ie11中也不行
.container{ border:1px solid red; display:flex; }html <div>
浏览 1提问于2015-01-06得票数 3
在我的基于web的Flex应用程序中，我对此方法进行了外部接口调用：下面是我的HTML页面中的方法：try {
mySearchIntegration = new ActiveXObject( "pkg.myView.ExternalIntegration.getData现在，
浏览 4提问于2013-10-23得票数 0
1回答
我正在尝试将div与它的容器底部对齐，这在IE10中是否应该使用柔性盒呢？.col-parent { display: -moz-box;.col-parent {
浏览 3提问于2015-12-09得票数 0
回答已采纳
5回答
我一直无法确定为什么flexbox在IE 11中不能工作。Chrome运行正常；IE11失败。在Chrome上成功运行的布局图像：IE11上的布局失败图像 background: #333; font-weightheight: 200px; bord
浏览 0提问于2015-08-27得票数 24
2回答
我有两个div在一个容器里，我想把它并排放在一起。在第二个div中，我放置了一个没有固定的图标。如果满足了某些条件，那么该图标就会隐藏。<div class="div1"></div></div>
下面的CSS为我工作，并满足了我的所有要求，但不工作的IE10，因为flex。.main-containe
浏览 3提问于2016-01-03得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
