Question

我有一个特殊的情况，Edge没有像任何其他浏览器一样使用它的flexbox。即使IE11处理这与Chrome和Firefox几乎相同。

以下是基本上适用于所有浏览器的预期结果：

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

这些图像并不尊重30％弹性基础的界限。如果我更改＆lt; img＆gt;标记为＆lt; div＆gt;并放置＆lt; img＆gt;在其中，它解决了一些问题。它会导致设计中的其他问题如果已经完成则不会显示在此处，所以如果可以的话，我想避免使用它。它不应该有一个包装器div。

真正奇怪的是，我无法找到记录此问题可能发生原因的任何内容。我已查看过flexbugs列表，似乎没有任何内容适用。

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;
  }
}

非常感谢任何见解！

Answer 1

我的边缘版已经过时了。我没有设置为自动更新，所以它在2015版本中。

版本： 20.10240
EdgeHTML版本： 12.10240

MS Edge图像不遵循弹性基础

1 个答案: