如何在IE11中进行基于flex的工作 [英] How to make flex-basis work in IE11

问题描述

我的网站在IE11中完全破解问题来自于 flex：1 1 0％; nofollow noreferrer> autoprefixer 和 postcss-flexbugs-fixes 。

当IE改变为 flex：1 auto; 时，更改（例如一个flexbox有两个 flex：1 1 auto; 不需要完全相同空间的子项）。因此，这个解决方案在其他浏览器上打破了我的设计（同时使它在IE11上更好 - 没有中断）。

人们如何设法使用Flexbox创建自己的网站在IE11上工作？

编辑：这是一个笔，它突出了我面临的问题： https://codepen.io/Zephir77167/pen/GMjBrd （在Chrome和IE11上试用）。

Edit2：这里是代码：

HTML：

 < div id =aclass =flex> 
< div id =bclass =item flex-1> 
嘿
< / div> 
< div id =cclass =item flex-0> 
 Ho 
< / div> 
< div id =dclass =item flex-1> 
 Heyheyheyheyho 
< / div> 
< / div> 
< br /> 
< div id =aclass =flex> 
< div id =bclass =item flex-1-variation> 
嘿
< / div> 
< div id =cclass =item flex-0> 
 Ho 
< / div> 
< div id =dclass =item flex-1-variation> 
 Heyheyheyheyho 
< / div> 
< / div> 
  

CSS：

  * {
 box-sizing：border-box; 
} 
 
 #a {
 background-color：pink; 
 height：300px; 
 width：100px; 
} 
 
 #b {
 background-color：green; 
 height：50px; 
} 
 
 #c {
 background-color：blue; 
 height：100px; 
} 
 
 #d {
 background-color：yellow; 
 height：150px; 
} 
 
 .flex {
 display：flex; 
 flex-direction：row; 
 align-items：center; 
 flex-wrap：wrap; 
} 
 
 .item.flex-0 {
 flex：none; 
} 
 
 .item.flex-1 {
 flex：1 1 0％; 
} 
 
 .item.flex-1-variation {
 flex：1 1 auto; 
 
  

解决方案

你可以使用这个CSS规则显式地定位它：

  _： -  ms-fullscreen，：root .IE11-only-class { 
 
 / * IE11特定的属性* / 
 
} 
  

data-console =truedata-lang =jsdata-hide =falsedata-console =truedata- babel =false>

* {box-sizing：border-box; } #a {background-color：pink;身高：300px; width：100px;}＃b {background-color：green; height：50px;}＃c {background-color：blue; height：100px;}＃d {background-color：yellow; height：150px;}。flex {display：flex; flex-direction：row; align-items：center; item.flex-0 {flex：none;}。item.flex-1 {flex：1 1 0％;} _： - ms-fullscreen，：root .IE-FlexAuto {flex-基础：auto;}

< div id =a class =flex> < div id =bclass =item flex-1 IE-FlexAuto>嘿< / div> < div id =cclass =item flex-0>何< / div> < div id =dclass =item flex-1 IE-FlexAuto> Heyheyheyheyho< / div>< / div>

一个我的答案，这个谈话更多的一个职位，也提供了一些脚本解决方案，可能是有帮助的

• 而不是使用前缀我想要求网站访问者升级浏览器

My website is completely broken in IE11. The problem comes from flex: 1 1 0%;, which I use everywhere thanks to autoprefixer and postcss-flexbugs-fixes.

The site does work on IE when I change it to flex: 1 1 auto;, but then some behaviors change (e.g. one flexbox with two flex: 1 1 auto; children which do not take exactly the same space). Therefore this solution breaks my designs on other browsers (while making it a lot nicer - not broken - on IE11).

How do people manage to make their sites built with Flexbox work on IE11?

Edit: here is a pen which highlights the problem I am facing: https://codepen.io/Zephir77167/pen/GMjBrd (try it on Chrome and IE11).

Edit2: here is the code:

HTML:

<div id="a" class="flex">
  <div id="b" class="item flex-1">
    Hey
  </div>
  <div id="c" class="item flex-0">
    Ho
  </div>
  <div id="d" class="item flex-1">
    Heyheyheyheyho
  </div>
</div>
<br />
<div id="a" class="flex">
  <div id="b" class="item flex-1-variation">
    Hey
  </div>
  <div id="c" class="item flex-0">
    Ho
  </div>
  <div id="d" class="item flex-1-variation">
    Heyheyheyheyho
  </div>
</div>

CSS:

* {
  box-sizing: border-box;
}

#a {
  background-color: pink;
  height: 300px;
  width: 100px;
}

#b {
  background-color: green;
  height: 50px;
}

#c {
  background-color: blue;
  height: 100px;
}

#d {
  background-color: yellow;
  height: 150px;
}

.flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.item.flex-0 {
  flex: none;
}

.item.flex-1 {
  flex: 1 1 0%;
}

.item.flex-1-variation {
  flex: 1 1 auto;
}

解决方案

When it comes to IE11, you could target it explicit using this CSS rule:

_:-ms-fullscreen, :root .IE11-only-class { 

  /* IE11 specific properties */

}

Stack snippet

* {
  box-sizing: border-box;
}

#a {
  background-color: pink;
  height: 300px;
  width: 100px;
}

#b {
  background-color: green;
  height: 50px;
}

#c {
  background-color: blue;
  height: 100px;
}

#d {
  background-color: yellow;
  height: 150px;
}

.flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}

.item.flex-0 {
  flex: none;
}

.item.flex-1 {
  flex: 1 1 0%;
}

_:-ms-fullscreen, :root .IE-FlexAuto {
  flex-basis: auto;
}

<div id="a" class="flex">
  <div id="b" class="item flex-1 IE-FlexAuto">
    Hey
  </div>
  <div id="c" class="item flex-0">
    Ho
  </div>
  <div id="d" class="item flex-1 IE-FlexAuto">
    Heyheyheyheyho
  </div>
</div>

Here is a post with an answer of mine, which talks some more about this, and also provide some script solutions which might be helpful

• Instead of using prefixes I want to ask site visitors to upgrade their browser

这篇关于如何在IE11中进行基于flex的工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！