怎么修？ IE、flexbox/grid 和 img 显示内联

Question

我正在尝试更改使用display:grid; 创建的图像网格，使其在 IE 上看起来不错。换句话说，找到一种解决方案，在不使用网格或 flexbox 的情况下并排显示一些图像。

无论有没有display:grid;，您都可以看到下面的代码运行良好。但是，不在 Internet Explorer - IE 上。

要查看的元素： .about__asseenon-images - 家长 .about__asseenon-logos - 儿童

body {
  padding: 5rem;
}
@media screen and (max-width: 900px) {
  body {
    padding: 3rem;
  }
}
@media screen and (max-width: 750px) {
  body {
    padding: 1rem;
  }
}

img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.secondary-heading {
  font-family: "Dancing Script", cursive;
  color: #662d91;
  font-size: 2.5rem;
  text-align: center;
  font-weight: normal;
}
@media screen and (max-width: 1350px) {
  .secondary-heading {
    font-size: 2rem;
    margin: 1rem 0;
  }
}
@media screen and (max-width: 1100px) {
  .secondary-heading {
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 750px) {
  .secondary-heading {
    font-size: 1.3rem;
  }
}
@media screen and (max-width: 600px) {
  .secondary-heading {
    font-size: 1.1rem;
  }
}

.tablets {
  display: none;
}
@media screen and (max-width: 900px) {
  .tablets {
    display: unset;
  }
}

.about {
  font-family: "Roboto", sans-serif;
  font-size: 1.3rem;
  text-align: justify;
  border-width: 5px;
  border-style: solid;
  border-color: #662d91;
}
.about__extras {
  display: flex;
  justify-content: space-around;
  margin: 2rem;
  margin-top: 1rem;
}

.about__extras-figure {
  margin: 0;
  flex-basis: 30%;
  flex-shrink: 0;
}
.about__extras-img {
  margin: 0 auto;
}
.about__extras-info {
  flex-shrink: 1;
  flex-basis: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.about__asseenon-logos {
  height: auto;
  width: 5%;
  display: inline;
  margin: 0.3rem;
}

/*
1 - Comment The @support to see the result I am trying to get to. 
2 - Test this code on IE. You will see that the 'logos' will cross the screen and increase size.
*/

@supports ((display: -ms-grid) or (display: grid)) {
.about__asseenon-images {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (minmax(min-content, 1fr)) [8];
  grid-template-columns: repeat(8, minmax(-webkit-min-content, 1fr));
  grid-template-columns: repeat(8, minmax(min-content, 1fr));
  -ms-grid-rows: (min-content) [3];
  grid-template-rows: repeat(3, -webkit-min-content);
  grid-template-rows: repeat(3, min-content);
  grid-column-gap: 1rem;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  justify-items: center;
}
.about__asseenon-logos {
  width: 90%;
  grid-column: span 2;
}
.about__asseenon-logos:nth-child(5) {
  -ms-grid-column: 2;
  -ms-grid-column-span: 2;
  grid-column: 2 / span 2;
}
}

<section class="about__extras">
            <figure class="about__extras-figure">
                <img src="http://via.placeholder.com/350x1150" alt="" class="about__extras-img">
            </figure>
            <div class="about__extras-info">
                <div class="about__extras-asseenon">
                    <h2 class="secondary-heading">Beauty and Lifestyle Expert As Seen On:</h2>
                    <div class="about__asseenon-images">
                        <img src="http://via.placeholder.com/250x250" alt="nbc" class="about__asseenon-logos">
                        <img src="http://via.placeholder.com/250x250" alt="cnn" class="about__asseenon-logos">
                        <img src="http://via.placeholder.com/250x250" alt="Seventeen" class="about__asseenon-logos">
                        <img src="http://via.placeholder.com/250x250" alt="FOX" class="about__asseenon-logos">
                        <img src="http://via.placeholder.com/250x250" alt="style networks" class="about__asseenon-logos">
                        <img src="http://via.placeholder.com/250x250" alt="girls life" class="about__asseenon-logos">
                        <img src="http://via.placeholder.com/250x250" alt="Rolling-Out-Logo" class="about__asseenon-logos">
                        <img src="http://via.placeholder.com/250x250" alt="Hope" class="about__asseenon-logos">
                        <img src="http://via.placeholder.com/250x250" alt="elev8" class="about__asseenon-logos">
                        <img src="http://via.placeholder.com/250x250" alt="hello beautyful" class="about__asseenon-logos">
                        <img src="http://via.placeholder.com/250x250" alt="wdbr" class="about__asseenon-logos">
                    </div>
                </div>
            </div>
        </section>

编辑

这就是它在 IE 中的样子

这就是它的外观（以及它在普通浏览器中的外观

Answer 1

如果不使用与任何版本的 Internet Explorer 不兼容的 @supports（查看 Documentation on Mozilla Developer）并通过 JavaScript 检测浏览器并向正文添加一个类，该怎么办。 要检测浏览器有一个很好的帖子like this。

在页面中添加包含类的行

为 Internet Explorer 添加行：我不喜欢在 Internet Explorer 中使用 'Flex' 我从来没有得到好的结果，我更喜欢使用经典的 'display: inline-block' 或 'float: left'

if ((navigator.userAgent.indexOf("MSIE") != -1) 
  || (!!document.documentMode == true)) // if IE > 10
{
  document.body.className += 'InternetExplorer';
}

body {
  padding: 5rem;
}

@media screen and (max-width: 900px) {
  body {
    padding: 3rem;
  }
}

@media screen and (max-width: 750px) {
  body {
    padding: 1rem;
  }
}

img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.secondary-heading {
  font-family: "Dancing Script", cursive;
  color: #662d91;
  font-size: 2.5rem;
  text-align: center;
  font-weight: normal;
}

@media screen and (max-width: 1350px) {
  .secondary-heading {
    font-size: 2rem;
    margin: 1rem 0;
  }
}

@media screen and (max-width: 1100px) {
  .secondary-heading {
    font-size: 1.6rem;
  }
}

@media screen and (max-width: 750px) {
  .secondary-heading {
    font-size: 1.3rem;
  }
}

@media screen and (max-width: 600px) {
  .secondary-heading {
    font-size: 1.1rem;
  }
}

.tablets {
  display: none;
}

@media screen and (max-width: 900px) {
  .tablets {
    display: unset;
  }
}

.about {
  font-family: "Roboto", sans-serif;
  font-size: 1.3rem;
  text-align: justify;
  border-width: 5px;
  border-style: solid;
  border-color: #662d91;
}

.about__extras {
  display: flex;
  justify-content: space-around;
  margin: 2rem;
  margin-top: 1rem;
}

.about__extras-figure {
  margin: 0;
  flex-basis: 30%;
  flex-shrink: 0;
}

.about__extras-img {
  margin: 0 auto;
}

.about__extras-info {
  flex-shrink: 1;
  flex-basis: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.about__asseenon-logos {
  height: auto;
  width: 5%;
  display: inline;
  margin: 0.3rem;
}


/*
1 - Comment The @support to see the result I am trying to get to. 
2 - Test this code on IE. You will see that the 'logos' will cross the screen and increase size.
*/

@supports ((display: -ms-grid) or (display: grid)) {
  .about__asseenon-images {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (minmax(min-content, 1fr)) [8];
    grid-template-columns: repeat(8, minmax(-webkit-min-content, 1fr));
    grid-template-columns: repeat(8, minmax(min-content, 1fr));
    -ms-grid-rows: (min-content) [3];
    grid-template-rows: repeat(3, -webkit-min-content);
    grid-template-rows: repeat(3, min-content);
    grid-column-gap: 1rem;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    justify-items: center;
  }
  .about__asseenon-logos {
    width: 90%;
    grid-column: span 2;
  }
  .about__asseenon-logos:nth-child(5) {
    -ms-grid-column: 2;
    -ms-grid-column-span: 2;
    grid-column: 2 / span 2;
  }
}


/* Internet Explorer Fix */

.InternetExplorer .about__extras {
  display: relative;
}

.InternetExplorer .about__extras-figure {
  width: 30%;
  display: inline-block
}

.InternetExplorer .about__extras-info {
  width: 60%;
  display: inline-block
}

.InternetExplorer .about__asseenon-images {
  text-align: center;
}

.InternetExplorer .about__asseenon-logos {
  display: inline-block;
  margin: 2% 2%;
  width: 19%;
}

.InternetExplorer .about__asseenon-logos:nth-of-type(7) {
  margin-right: 5%;
}

.InternetExplorer .about__asseenon-logos:nth-of-type(5) {
  margin-left: 5%;
}

<section class="about__extras">
  <figure class="about__extras-figure">
    <img src="http://via.placeholder.com/350x1150" alt="" class="about__extras-img">
  </figure>
  <div class="about__extras-info">
    <div class="about__extras-asseenon">
      <h2 class="secondary-heading">Beauty and Lifestyle Expert As Seen On:</h2>
      <div class="about__asseenon-images">
        <img src="http://via.placeholder.com/250x250" alt="nbc" class="about__asseenon-logos">
        <img src="http://via.placeholder.com/250x250" alt="cnn" class="about__asseenon-logos">
        <img src="http://via.placeholder.com/250x250" alt="Seventeen" class="about__asseenon-logos">
        <img src="http://via.placeholder.com/250x250" alt="FOX" class="about__asseenon-logos">
        <img src="http://via.placeholder.com/250x250" alt="style networks" class="about__asseenon-logos">
        <img src="http://via.placeholder.com/250x250" alt="girls life" class="about__asseenon-logos">
        <img src="http://via.placeholder.com/250x250" alt="Rolling-Out-Logo" class="about__asseenon-logos">
        <img src="http://via.placeholder.com/250x250" alt="Hope" class="about__asseenon-logos">
        <img src="http://via.placeholder.com/250x250" alt="elev8" class="about__asseenon-logos">
        <img src="http://via.placeholder.com/250x250" alt="hello beautyful" class="about__asseenon-logos">
        <img src="http://via.placeholder.com/250x250" alt="wdbr" class="about__asseenon-logos">
      </div>
    </div>
  </div>
</section>