html - MS Edge 图像不符合 flex 基础

Question

我有一个 Edge 的特殊情况，它的行为与其他浏览器的 flexbox 不同。即使是 IE11 也几乎与 Chrome 和 Firefox 一样处理这个问题。

The example codepen here.

这是适用于基本上所有浏览器的预期结果:

相反，这是 Microsoft Edge 中正在发生的事情:

这就像图像不遵守 30% flex 基础的界限。如果我将 标记更改为

并将 放在其中，它会在一定程度上解决问题。如果这样做的话，它会导致我在设计中出现其他未在此处显示的问题，因此如果可以的话，我想避免它。它不需要包装器 div。

真正奇怪的是，我找不到任何记录为什么会发生此问题的内容。我查看了 flexbug 列表，但似乎没有任何内容适用。

HTML:

<div class="sections-container">
<section class="content-tiles-section">
    <div class="content-tiles-content">
        <div class="content-tiles">
                <div>
                    <img class="content-tile-image" src="http://via.placeholder.com/431x288">
                    <div class="content-tile-content">
                        <h4>
                            <a href="#">
                                Title Link
                            </a>
                        </h4>
                        <div class="content-tile-paragraph p-like">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at lorem justo. Maecenas eget dui est. In cursus. 
                        </div>
                    </div>
                    <a class="content-tile-link" href="#">
                        Learn More
                    </a>
                </div>
                <div>
                    <img class="content-tile-image" src="http://via.placeholder.com/398x266">
                    <div class="content-tile-content">
                        <h4>
                            <a href="#">
                                Title Link
                            </a>
                        </h4>
                        <div class="content-tile-paragraph p-like">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at lorem justo. Maecenas eget dui est. In cursus. 
                        </div>
                    </div>
                    <a class="content-tile-link" href="#">
                        Learn More
                    </a>
                </div>
                <div>
                    <img class="content-tile-image" src="http://via.placeholder.com/462x308">
                    <div class="content-tile-content">
                        <h4>
                            <a href="#">
                                Title Link
                            </a>
                        </h4>
                        <div class="content-tile-paragraph p-like">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at lorem justo. Maecenas eget dui est. In cursus. 
                        </div>
                    </div>
                    <a class="content-tile-link" href="#">
                        Learn More
                    </a>
                </div>
                <div>
                    <img class="content-tile-image" src="http://via.placeholder.com/505x335">
                    <div class="content-tile-content">
                        <h4>
                            <a href="#">
                                Title Link
                            </a>
                        </h4>
                        <div class="content-tile-paragraph p-like">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at lorem justo. Maecenas eget dui est. In cursus. 
                        </div>
                    </div>
                    <a class="content-tile-link" href="#">
                        Learn More
                    </a>
                </div>
                <div>
                    <img class="content-tile-image" src="http://via.placeholder.com/450x300">
                    <div class="content-tile-content">
                        <h4>
                            <a href="#">
                                Title Link
                            </a>
                        </h4>
                        <div class="content-tile-paragraph p-like">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at lorem justo. Maecenas eget dui est. In cursus. 
                        </div>
                    </div>
                    <a class="content-tile-link" href="#">
                        Learn More
                    </a>
                </div>
                <div>
                    <img class="content-tile-image" src="http://via.placeholder.com/500x333">
                    <div class="content-tile-content">
                        <h4>
                            <a href="#">
                                Title Link
                            </a>
                        </h4>
                        <div class="content-tile-paragraph p-like">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean at lorem justo. Maecenas eget dui est. In cursus. 
                        </div>
                    </div>
                    <a class="content-tile-link" href="#">
                        Learn More
                    </a>
                </div>
        </div>
    </div>
</section>
</div>

SCSS:

.sections-container .content-tiles-section {
  background-color: #05225E;
  .content-tiles-content {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 50px 0;
    > h2 {
      text-align: center;
    }
  }
  .content-tiles {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: stretch;
    > div {
      margin: 10px 0;
      flex: 0 1 30%;
      background-color: #FFFFFF;
      border-top-right-radius: 15px;
      border-bottom-left-radius: 15px;
      display: flex;
      flex-direction: column;
      .content-tile-image {
        flex: 0 1 100%;
        width: 100%;
        border-top-right-radius: 15px;
        border-bottom: 1px solid #D8D8D8;
      }
      .content-tile-content {
        flex: 1 1 auto;
        padding: 12px 24px;
        flex-grow: 1;
      }
      .content-tile-link {
        flex: 0 1 auto;
        padding: 12px 24px 24px 24px;
      }
    }
  }
}
.our-services .sections-container {
  .our-services-main-content-section {
    padding: 35px 15px 75px 15px;
    .intro {
      color: #005596;
      max-width: 900px;
      width: 100%;
      font-size: 2rem;
      margin: 0 auto;
      text-align: center;
    }
  }
  .content-tiles-section {
    background-color: #a40356;
  }
}

非常感谢任何见解!

最佳答案

我的 edge 版本已过时。我没有将我的设置为自动更新，所以它是 2015 版本。

版本:20.10240
EdgeHTML 版本:12.10240

关于html - MS Edge 图像不符合 flex 基础，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45292108/

Answer 1

我的 edge 版本已过时。我没有将我的设置为自动更新，所以它是 2015 版本。

版本:20.10240
EdgeHTML 版本:12.10240