Flex 项目超出 IE 中父项的宽度
Posted
技术标签:
【中文标题】Flex 项目超出 IE 中父项的宽度【英文标题】:Flex items exceed width of parent in IE 【发布时间】:2015-12-10 13:37:19 【问题描述】:我有一个 ul > li > a > img
括号,我正在使用 flexbox 将所有列表项对齐到一行,同时图像保持其纵横比。
它在 Chrome 45、Firefox 40、Safari 中的外观8、Opera 28 & Edge
它在 IE 10/11 中的样子
所以我的问题是我试图在 IE 中实现与 Chrome 和 Firefox 中相同的行为。
我的SASS/SCSS
ul.images
float: left;
clear: both;
width: 100%;
min-height: auto; // Required for Firefox
padding: 0;
margin: 0;
border: 1px solid yellow;
display: -webkit-flex;
-webkit-flex-direction: row;
display: -ms-flexbox;
-ms-flex-direction: row;
display: flex;
flex-direction: row;
li
border: 2px solid green;
flex: 1 1 auto;
width: auto;
min-width: 0; // Required by Firefox
max-width: 100%;
max-height: auto;
img
float: left; // Removes phantom margin
width: auto;
max-width: 100%;
height: auto;
max-height: 100px;
这里是 CodePen,适合任何想要更详细了解的人。
【问题讨论】:
在 Firefox 40.0.3 中也超过了 我几乎可以肯定这是因为 Firefox 和 IE 完美地遵守了 W3C 规范,而这实际上是我的错误。但是我没有完全解释/理解规范以编写正确的代码。 对于ul
和container
添加overflow: hidden;
@lolka_bolka 除了隐藏溢出的内容之外,这不会实现任何目标。
我已经使用 min-width: 0; 修复了 Firefox这是因为 Firefox 将其默认最小值更改为默认值。
【参考方案1】:
不确定这是否是您希望解决问题的方式,但我已经添加了
li
height: 100%
还有其他一些东西,它似乎在这里工作:
编辑:更新了演示,Chrome 和 IE 的比例现在似乎还不错
http://jsfiddle.net/uf30wuwz/3/
【讨论】:
感谢您的想法,但我正在尝试保持 Chrome 结果中的纵横比:)【参考方案2】:最简单的解决方案:将 'overflow: hidden' 添加到类 '.images'
在评论者处:
没错,伙计们,错过了那个,抱歉。 @mathijs,在技术上是正确的,但 CSS 充满了黑客(需要)。以 clearfix hack 为例,它现在似乎很普遍。
但在这种情况下,主容器的最大宽度为 500 像素,当缩放后的图像宽度的总和不适合图像容器时,隐藏溢出似乎是最佳选择。这是一个非此即彼的情况。
顺便说一句:Chrome 与 FF(DE 42+)相比不太接近 W3C 规范,我会选择开始使用 FF 进行初始测试,然后在 Ch 中对其进行测试以检测怪癖。我敢打赌 Ch 在内部隐藏了溢出。
@Matt,我会坚持使用“溢出:隐藏”解决方案,在一个较大的项目中它相当微不足道并且可以完成工作。
我在想,你真的需要 ul/li 吗?通过对代码进行一些重新设计,它变得不那么复杂和简洁,看看:
@Matt 再次:显然 Ch 会在容器具有固定宽度(如您的容器)时削减过多的元素数据,而 FF 和 IE 希望您告诉他们如何处理它(W3C)。 我已将类 'rew-images' 从 'overflow:hidden' 更改为 'overflow-x: scroll; overflow-y: hidden',现在你可以明白为什么需要对溢出做一些事情了。
问题的根源在于您希望图像很好地对齐并且具有适当的缩放比例(我也是如此)。但是生成的图像宽度的总和大于 500 像素(减去边距等),因此类“图像”会溢出。您根本无法将 600px 放在 500px 的容器中并保持纵横比。您将不得不进行一些切割或删除主容器的宽度限制(删除宽度:500px)。正如我之前所说:非此即彼……
.rew-container
float: left;
width: 500px;
border: 2px solid black;
padding: 15px
.rew-images
display: flex;
width: 100%;
padding: 0;
margin: 0;
border: 1px solid red;
overflow-x: scroll; overflow-y: hidden
.rew-images img
min-width: 100%;
max-width: 100%;
width: auto;
max-height: 100px
.rew-images a
flex: 1 1;
border: 2px solid green;
max-height: 100px;
<div class="rew-container">
<div class="rew-images">
<a href="http://4.bp.blogspot.com/-q8j1nkqwHnE/Tsbs1isbCTI/AAAAAAAAAG4/mcWdJwJ5uvE/s1600/armin_van_buuren_%25282%2529_798.jpg" title="armin_van_buuren_%282%29_798.jpg">
<img src="https://tse4.mm.bing.net/th?id=JN.d1jQ4iuFK0%2b4AkstmpzD1A&pid=15.1" >
</a>
<a href="http://thegun2oo5.files.wordpress.com/2010/05/1140_armin_van_buuren.jpg" title="Armin van Buuren – the best Dj’ in the world :X:X:X">
<img src="https://tse3.mm.bing.net/th?id=JN.RTJ8eeB%2bIMptSFcLhGpXQw&pid=15.1" >
</a>
<a href="http://thexipiron.files.wordpress.com/2012/01/armin-van-buuren.jpg" title="armin van buuren">
<img src="https://tse2.mm.bing.net/th?id=JN.VkPvTXw%2fPEOMmOcl9smvoQ&pid=15.1" >
</a>
<a href="http://fondosdedj.com/wp-content/uploads/images/74/armin-van-buuren.jpg" title="Nos encanta la música de Armin van Buuren, y lo queremos demostrar ...">
<img src="https://tse2.mm.bing.net/th?id=JN.SvQClhGAAGcPYl1U2SZQsA&pid=15.1" >
</a>
</div>
</div>
【讨论】:
我不认为这是solution
。这只是防止它阻塞其他元素。
正是@MatthijsvanHest 所说的。在 cmets 中也曾提出过这一建议。
感谢更新的答案,它实际上不需要是 ul li 所以我很高兴更改代码但使用隐藏的溢出非常不舒服。当我从办公室回家并更新时,我会玩一会!
在这种情况下不使用列表没有明显的优势,所以我会继续努力寻找更好的解决方案!【参考方案3】:
将<img>
的宽度从自动更改为 100%
img
width: 100%;
max-width: 100%;
height: auto;
max-height: 100px;
看来是不尊重标准的Chrome
【讨论】:
嗯,Chrome 不尊重这种比例,但 IE/FF 这样做 仍然没有回答这个问题。但是感谢您的评论。【参考方案4】:我遇到了同样的问题,找到了这个修复,只需将它添加到您的样式表中:
*
min-height: 0;
min-width: 0;
【讨论】:
以上是关于Flex 项目超出 IE 中父项的宽度的主要内容,如果未能解决你的问题,请参考以下文章
什么 JQuery 选择器会排除与给定选择器匹配的父项的项目?