self在IE11上不工作

self在IE11上不工作

本文介绍了align-items,align-self在IE11上不工作的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有



但不是在IE11:





我检查过IE不兼容模式 - 它在IE11模式。



这里发生了什么事?

解决方案

问题是在flex容器上的 min-height



如果您切换到 height:4em ,您会看到您的布局工作。



一个简单的解决方法是让 .container 一个flex项目。



换句话说,将此代码添加到代码中:

  body {
display : 柔性;
}

.container {
width:100%;
}

无论如何,通过使flex容器也是一个flex项,



此处的更多详细信息:


I have a simple plunker here.

.container {
  display:flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  min-height: 4em;
}

.nav {
  flex: 0 0 4em;
  height: 1em;
}

.logo {
  flex: 1 0 auto;
  align-self: stretch;
}

This is working how I want it to in Chrome 49:

But not in IE11:

I have checked that IE isn't in compatability mode - it's not - it's in IE11 mode.

What's going on here?

解决方案

The problem is that min-height on a flex container isn't recognized by flex items in IE11.

If you switch to height: 4em, you'll see that your layout works.

A simple workaround is to make .container a flex item.

In other words, add this to your code:

body {
    display: flex;
}

.container {
    width: 100%;
}

For whatever reason, by making your flex container also a flex item, the min-height rule is respected by the child elements.

More details here: Flexbugs: min-height on a flex container won't apply to its flex items

这篇关于align-items,align-self在IE11上不工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-01 10:56