IE 11忽略最小宽度时使用flex宽度 [英] IE 11 ignores min-width when using flex width

问题描述

我想知道是否有人可以帮助解决这个问题。我花了很多时间，我的想法，我试过各种建议从谷歌的结果，flex的增长和收缩的各种组合，并不能让它工作。

演示： https://embed.plnkr.co / dIPh53W4DBkmTB51DCHp / （用IE 11打开）

编辑代码： https://plnkr.co/edit/dIPh53W4DBkmTB51DCHp?p=preview

在这种情况下，在平板视图中，< ul> flex width应为90％，但在桌面视图中< ul> flex width应该只有55％。但是，我们不希望桌面视图中的< ul> 比平板电脑视图中的短，因此我们设置了 min- width：864px 在桌面视图上的< ul> 因此，如果您在950px和970像素之间调整屏幕大小，则< ul> 不应突然缩小。

但在IE11中，元素的宽度不正确，因此不会按预期居中。我认为这是因为在960px浏览器维度，55％会 max-width：528px 在< ul> 元素，但它也有 min-width：864px 。由于某种原因，IE11将它放置在左边（而不是中心），宽度为528像素。所以IE11似乎忽略min-width属性，它不像其他浏览器一样处理它。

代码示例：

index.html ：

 < div class =progress-bar > 
< ul> 
< li>测试项目< / li> 
< li>测试项目< / li> 
< li>测试项目< / li> 
< li>测试项目< / li> 
< / ul> 
< / div> 
  

style.css：

  div {
 display：flex; 
 flex-direction：row; 
 justify-content：center; 
} 
 
 ul {
 display：flex; 
 flex：1 1 90％; 
 max-width：90％; 
 
 margin：0; 
 padding：0; 
 list-style-type：none; 
} 
 
 li {
 display：flex; 
 flex：1 1 0％; 
 justify-content：center; 
 
 margin：0; 
 padding：12px 0; 
 list-style-type：none; 
 background：＃f7f7f7; 
} 
 
 @media（min-width：960px）{
 ul {
 min-width：864px！important; 
 flex-basis：55％; 
 max-width：55％; 
} 
} 
  

IE 10实际上在这种情况下工作正常，

任何想法如何解决这个问题？

解决方案

由于在IE11中似乎没有办法解决这个问题，我添加了一个临时的媒体查询来改变特定维度的行为。

在我们想要90％宽度，最高959px屏幕尺寸，然后55％后960px屏幕尺寸的情况下 - 我做计算，以确定我们想要<当屏幕在960像素和1570像素（864像素/ 55％）之间时，元素宽度为864像素（960像素x 90％）。c $ c>< ul>因此，对于此维度范围，我强制宽度和最大宽度为864像素。

然后，对于大于1571像素的屏幕，flexbox 55％ p>

使用这种方法，我可以完全忽略min-width。

  media（min-width：960px）and（max-width：1570px）{
 ul {
 flex-basis：100％; 
 max-width：864px; 
 width：864px; 
} 
} 
  

I'm wondering if someone can help with this problem. I spent a lot of time on it and I'm all out of ideas, I've tried various suggestions from Google results, various combinations of flex grow and shrink, and couldn't get it working.

Demo: https://embed.plnkr.co/dIPh53W4DBkmTB51DCHp/ (open with IE 11)

Edit the code: https://plnkr.co/edit/dIPh53W4DBkmTB51DCHp?p=preview

In this case, in tablet view the <ul> flex width should be 90%, but in desktop view the <ul> flex width should only be 55%. However, we don't want the <ul> in desktop view to be shorter than it is in tablet view, so we set a min-width: 864px on <ul> for desktop view. So if you resize screen between 950px and 970px, the <ul> should no longer shrink suddenly.

This seems to work fine in all of Chrome, Firefox, Safari, and IE10.

But in IE11, the element is the wrong width and won't center as expected. I think it's because at 960px browser dimension, 55% would be max-width: 528px on the <ul> element, but it also has min-width: 864px. For some reason, IE11 renders this as being positioned to the left (instead of the center), with a width of 528px. So IE11 seems to ignore the min-width property, it doesn't handle it like the other browsers.

Code example:

index.html:

<div class="progress-bar">
  <ul>
    <li>Test item</li>
    <li>Test item</li>
    <li>Test item</li>
    <li>Test item</li>
  </ul>
</div>

style.css:

div {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

ul {
  display: flex;
  flex: 1 1 90%;
  max-width: 90%;

  margin: 0;
  padding: 0;
  list-style-type: none;
}

li {
  display: flex;
  flex: 1 1 0%;
  justify-content: center;

  margin: 0;
  padding: 12px 0;
  list-style-type: none;
  background: #f7f7f7;
}

@media (min-width: 960px) {
  ul {
    min-width: 864px !important;
    flex-basis: 55%;
    max-width: 55%;
  }
}

IE 10 actually works fine in this case, so seems that IE 11 release might have broke something that was already working.

Any ideas how this can be resolved?

解决方案

Since there seems to be no way to resolve this in IE11, I added a temporary media query to change the behavior for the specific dimensions.

In the case where we want 90% width up to 959px screen size, then 55% after 960px screen size -- I did calculation to determine that we want the <ul> element width to be 864px (960px x 90%) when screen is between 960px and 1570px (864px / 55%). So for this dimension range, I force a width and max-width of 864px.

Then for screens larger than 1571px, the flexbox 55% continues to apply again.

Using this method, I can completely ignore min-width.

@media (min-width: 960px) and (max-width: 1570px) {
  ul {    
    flex-basis: 100%;
    max-width: 864px;
    width: 864px;
  }
}

这篇关于IE 11忽略最小宽度时使用flex宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！