IE中的Flexbox不能正确设置项目宽度 [英] Flexbox in IE doesn't set item widths correctly

问题描述

我正试图使用​​flexbox在div中正确地分隔一些项目。

 < div class =container> 
< ul class =action-box> 
< li class =long-item>一些很酷的信息，需要在2行以上< / li> 
< li>< a>做一件事< / a>< / li> 
< li>< a>做不同的事情< / a>< / li> 
< / ul> 
< div> 
< a> 
做一些不同的
< / a> 
< / div> 
< / div> 
  

我试图让所有项目的大小相同。

我尝试设置 flex-basis ，它在chrome中工作，但是在IE中打破了可怕的。

https://jsfiddle.net/w71t2247/ 7 /

我也尝试在长项目上设置 max-width IE浏览器，但在铬中心。

https ：//jsfiddle.net/w71t2247/8/

我不确定如何处理这个问题。我可以浏览器黑客，但我觉得有一个更清洁的方式。

解决方案

原来这是Chrome的一个功能。它禁止任何对你有反应，有一个图像的内容类型或任何它认为它可以处理。
$ b $我通过改变应用程序/ json的响应类型，并解析出来的对象

I am trying to use flexbox to space some items properly within a div.

<div class="container">
    <ul class="action-box">
        <li class="long-item">Some cool info That needs to be on 2 lines</li>
        <li><a>Do a thing</a></li>
        <li><a>Do a different thing</a></li>
    </ul>
    <div>
      <a>
        Do something different
      </a>
    </div>
</div>

I'm trying to get the all items the same size.

I tried setting the flex-basis, which works in chrome, but breaks horribly in IE.

https://jsfiddle.net/w71t2247/7/

I also tried setting the max-width on the long item, which works in IE, but is off center in chrome.

https://jsfiddle.net/w71t2247/8/

I'm unsure how to handle this. I could browser hack it, but I feel like there is a cleaner way.

解决方案

Turns out this is a 'feature' of Chrome. It pareses any response for you that has a content type of image or whatever else it thinks it can handle.

I fixed this by changing the response type to application/json, and parsing it out of an object

这篇关于IE中的Flexbox不能正确设置项目宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！