html – IE中嵌套的flexbox高度问题

概述我已经嵌入了一些带有一些图像的flexbox,它在Chrome中看起来不错,但是在IE中你可以看到flex-item-wrapper上的边框没有与图像的底部齐平.顺便说一句,在布局中,我有时会有几个带有许多图片的flex-row. .flex-list { display: flex; flex-direction: column;}.flex-row { display: fle 我已经嵌入了一些带有一些图像的flexBox,它在Chrome中看起来不错,但是在IE中你可以看到flex-item-wrapper上的边框没有与图像的底部齐平.顺便说一句,在布局中,我有时会有几个带有许多图片的flex-row.

.flex-List {  display: flex;  flex-direction: column;}.flex-row {  display: flex;}.flex-item-wrapper {  wIDth: 100%;  border: 1px solID green;}.flex-item {  height: 100%;  wIDth: 100%;  border: 1px solID blue;}.picture {  wIDth: 100%;}

<div >  <div >    <div >      <div >        <a href='#'>          <img  src="http://www.picgifs.com/clip-art/cartoons/super-mario/clip-art-super-mario-832109.jpg" alt="">        </a>      </div>    </div>    <div ></div>    <div ></div>    <div ></div>  </div></div>

解决方法 这似乎有效：

.flex-row {  display: flex;  flex: 0 0 auto; /*added*/}

要么

.flex-row {  display: flex;  height: 100%; /*added*/}

查看简化演示：

.flex-List {  display: flex;  flex-direction: column;}.flex-row {  display: flex;  flex: 0 0 auto;}.flex-item {  flex: 1;  border: 1px solID blue;}.picture {  wIDth: 100%;  height: auto;}

<div >  <div >    <div >      <a href='#'>        <img  src="http://www.picgifs.com/clip-art/cartoons/super-mario/clip-art-super-mario-832109.jpg" alt="">      </a>    </div>    <div ></div>    <div ></div>    <div ></div>  </div></div>

总结

以上是内存溢出为你收集整理的html – IE中嵌套的flexbox高度问题全部内容，希望文章能够帮你解决html – IE中嵌套的flexbox高度问题所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。