Question

在我当前的网站上，the home page顶部的响应式图库适用于除IE之外的所有浏览器。我在IE11中看它，它打破了flexbox。我使用Autoprefixer为Flexbox添加了所需的前缀，但它似乎仍在破坏。我不确定如何解决它。

<section class="current-project">
  <div class="big-photo">
    <img src="http://www.jameswebdevelopment.com/codepen/flexbox-image-gallery/sfys-main.jpg" alt="Sing For Your Seniors performing at the Village Adult Day Health Center in New York City">
  </div>
  <section class="description">
    <div>
      <h1>Current Project</h1>
      <h2><a href="/work/sfys.php">Sing For Your Seniors</a></h2>
      <p>Sing For Your Seniors is a non-profit organization that uses music to change lives.</p>
    </div>
  </section>
  <div class="minipics">
    <div>
      <img src="/img/work/sfys/logo.png" alt="Sing For Your Seniors logo">
    </div>
    <div>
      <img src="/img/work/sfys/home.png" alt="Sing For Your Seniors home page">
    </div>
    <div>
      <img src="/img/work/sfys/performers.png" alt="Sing For Your Seniors Performers page">
    </div>
    <div>
      <img src="/img/work/sfys/contact.png" alt="Sing For Your Seniors Contact page">
    </div>
  </div>
</section>

SCSS：

@mixin smallpics($grow: 1, $width: 50%) {
  flex: $grow $width;
}

.current-project, .project, .description {
  display: flex;
  flex-flow: row wrap;
}

.project {
  margin-bottom: ($padding * 2);
}

.description {
  align-items: center;
  justify-content: center;
  padding: ($padding * 2) $padding;
  @media all and (min-width: $small) {
    padding: 0 $padding;
  }
}

Answer 1

好的，我必须添加媒体查询：

.current-project, .project, .description {
  display: flex;
  flex-flow: row wrap;
  @media all and (min-width: $small) {
    flex-flow: row nowrap;
  }
}

Answer 2

IE11中显示flex已损坏。

我通过像这样定位IE11来修复它：

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .content {
      flex: none;
    }
}

网站库在IE11中与flexbox打破

2 个答案: