IE Flexbox证明内容中心溢出问题

问题描述

在IE11上观看以下演示时，会出现一个问题，内容显示为右对齐并推到屏幕外.

When viewing the following demo on IE11, there is an issue in which the content is displayed aligned right and pushed outside of the screen.

Codepen演示

以下是证明资源中心合理的代码:

Here is the code that justifies the content center:

.search-results {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}

您可以在以下屏幕快照中看到该问题:

You can see the issue in this screenshot here:

我正在Windows 10上使用浏览器堆栈 IE 11进行仿真.

I'm using browserstack IE 11 on windows 10 to emulate.

似乎计算出的Flex包装器的宽度大于实际宽度.在元素，HTML或正文上没有设置最大/最大宽度的问题似乎可以解决.我了解IE11对flexbox有一些支持，是否缺少我想要的属性?供应商前缀是由Codepen添加的，因此在此基础上应予以介绍.

It seems to be calculating the width of the flex wrapper greater than it actually is. No amount of setting max-/width on the element, HTML or body seems to fix it. I understand IE11 has some flaky support for flexbox, is there a property I'm missing? Vendor prefixes are being added by Codepen, so I should be covered on that basis.

推荐答案

应设置Flex-basis以避免IE中出现这些问题.将".search-results__list"的flex属性更改为flex: 0 1 712px.请查看以下示例:

Flex-basis should be set to avoid these problems in IE. Change the flex property of the ".search-results__list" to flex: 0 1 712px. Check the example below:

http://codepen.io/anon/pen/QKKpGx

有关更多信息: https://philipwalton.com/articles/normalizing -cross-browser-flexbox-bugs/

这篇关于IE Flexbox证明内容中心溢出问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！