IE 和 Edge flexbox 错误？

【问题标题】：IE and Edge flexbox bug?IE 和 Edge flexbox 错误？
【发布时间】：2018-02-03 21:02:09
【问题描述】：

当使用带有滚动列和水平滚动的 flexbox 时，我注意到 Edge 和 IE 出现异常。以下 codepen 演示了 Chrome 和 FireFox 中的正确功能；但是，视图的最右侧有一个额外的滚动条，用于轻微的垂直溢出（水平滚动条的高度），仅在 IE 11 和 Edge 中存在：

Original Codepen Example

原始 html 供参考：

<body>
  <div class="app-master">
    <div class="app-sidebar-spacer">

    </div>
    <div class="app-content">
      <div class="app-header">
        <div class="ui secondary small menu">
          <a class="right item">
            <div>
              <span>happy text</span>
            </div>
          </a>
        </div>
      </div>
      <div class="app-work-zone">

        <div class="app-zone-content">
          <div class="ui segment app-zone-segment">

          </div>
        </div>
        <div class="app-zone-buffer">
        </div>

        <div class="app-zone-content">
          <div class="ui segment app-zone-segment">

            <div>
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
              Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
              sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem
              ip"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
              magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
              magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
              magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
              magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
              magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
              magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
              magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
              magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
              consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
              Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              sum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
              aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
              sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem
              ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
              aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
              sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." "Lorem
              ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
              aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
              Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
              sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

            </div>
          </div>
        </div>
        <div class="app-zone-buffer">
        </div>

        <div class="app-zone-content">
          <div class="ui segment app-zone-segment">

          </div>
        </div>
        <div class="app-zone-buffer">
        </div>

      </div>
    </div>
  </div>
</body>

原始 css 供参考：

 html,
 body {
   height: 100%;
   margin: 0;
   min-height: 100%;
   padding: 0;
 }

 .app-master {
   display: flex;
   flex-direction: row;
   height: 100%;
 }

 .app-sidebar-spacer {
   flex: 0 0 215px;
   background-color: #2959a5;
 }

 .app-content {
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
   overflow-x: auto; 
 }

 .app-header {
   min-height: 43px;
 }

 .app-header>.ui.menu {
   width: 100%;
 }

 .app-work-zone {
   flex: 1 1 auto;
   display: flex;
   flex-direction: row;
   min-height: 0;
 }

 .app-zone-content {
   flex: 1 1 0;
   min-width: 600px;
 }

 .app-zone-buffer {
   width: 2px;
   text-align: center;
 }

 .app-zone-segment {
   height: 100%;
   overflow-y: auto;
 }

注意事项：

  1. 我在 codepen 中加载了语义 UI 以实现基本样式，但布局是使用纯 flexbox（不是语义网格系统）开发的。
  2. 语义 ui 已使用规范化器，因此在 codepen css 中将其关闭。
  3. 在 codepen 中，我打开了“autoprefixer”。
  4. 在IE中查看时，调整预览窗口的高度，预览窗口的垂直滚动条会突然出现滚动。
  5. 我所有的自定义类都以“app-”为前缀。

下面是 Asana 的人们对这一概念的有效实施的图片；但是，我很难理解实现。

Image 1) 窗口折叠后，Edge 中的水平滚动正确，屏幕底部没有隐藏内容，视图的最左侧也没有多余的滚动条：

图 2) 随着窗口的展开（并且在 Edge 中没有水平滚动以证明在水平滚动生效时没有隐藏内容）：

那么，这实际上是 IE 和 Edge 中的错误，还是 Asana 看似功能性的实现证明了一种解决方法？

编辑 1) 添加了对异常的更深入描述。

编辑 2) 添加更新的 codepen 链接以跟踪跨浏览器进度。

编辑 3) 使用功能性 hack 更新了最终的 codepen。现在，IE11、Edge、Chrome 和 FF 的功能看起来应该相同。完整的功能 hack 列表是：

@supports (-ms-ime-align: auto) and (not (object-fit: cover)) {
  .app-content {
    overflow-x: scroll; 
  }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
  .app-content {
    overflow-x: scroll; 
  }
}

当浏览器宽度大于 825 像素时，以下媒体查询在设置为滚动的浏览器中将溢出-x 恢复为自动（参见上面的技巧）。这个数字来自用于左侧导航的 225 像素，以及用于侧导航右侧的每个 flexbox 项目的最小 200 像素。当浏览器宽度大于 825px 时，这可以防止 IE11 和 Edge 中出现多余的水平滚动条。

@media (min-width: 825px) {
  .app-content {
    overflow-x: auto;
  }
}

Final (updated with functional hacks) Codepen Example

【问题讨论】：

  • 我正在尝试理解这个问题。你会说和这个类似吗？ stackoverflow.com/questions/40024840/…
  • 我在 FF 中将窗口放大，结果与您展示异常的图像相同。不确定您要显示什么问题
  • 对不起那些家伙。我一直在研究这个问题太久了，并且犯了让我的大脑填写细节的经典错误。我已经编辑了帖子以澄清。如果还不清楚，请告诉我。 @Michael_B，我认为这是一个单独的问题，因为它根本没有使用“列换行”。
  • @Huangism，你的FF显示超右滚动条只滚动水平滚动条的高度？我似乎无法重现。
  • 哦，那个酒吧，不，我没看到

标签： css internet-explorer flexbox microsoft-edge


【解决方案1】：

这显然是一个错误（尚未发现任何错误报告，我会在找到时更新）。

我已经在 Windows 10 Fall Creators Update 版本 (Microsoft EdgeHTML 16) 上使用 Edge 对此进行了测试，现在已修复并可以正常工作。

这里是another post，关于同样的问题，IE 的一种解决方法是使用scroll 而不是auto (overflow-x: scroll)

根据评论更新

这是一个基于 CSS 的 hack 的尝试，可以检测 IE 11 和 Edge 12-15。

这个 IE 11 CSS hack 似乎可以正常工作：

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
  .app-content {
    overflow-x: scroll; 
  }
}

对于 Edge，这个 CSS hack 似乎被证明是有效的：

以下 hack 似乎可以找到 Edge：

@supports (-ms-ime-align: auto) {
  .app-content {
    overflow-x: scroll; 
  }
}

虽然这也捕获了 Edge 16，但在这里我们很幸运，因为 Edge 16 添加了对 object-fit 的支持

所以通过简单地检查(-ms-ime-align: auto) 和(not (object-fit: cover))，我们应该能够真正区分Edge 12-15 和16

@supports (-ms-ime-align: auto) and (not (object-fit: cover)) {
  .app-content {
    overflow-x: scroll; 
  }
}

如前所述，微软似乎会在未来的 MS Edge 中删除尽可能多的 -ms 前缀属性，但我们不介意，因为我们希望针对仍然拥有它们的旧版本

我已使用此 Codepen 在 IE 11 和 Edge 16 上成功测试了上述 2 个 CSS hack：

如果有人发现这不适用于特定的 Edge 版本，请告诉我，以便我更新这篇文章。

对于喜欢使用 Javascript 的你，这里有一篇有趣的文章：

【讨论】：

  • 我们可以在这里使用黑客攻击旧版本的边缘吗：stackoverflow.com/questions/32201586/… 黑客似乎对我有用（我添加了一个更新的代码笔）。我目前无法访问秋季创作者更新。你能确认黑客是否会干扰 Edge 16 吗？我会将您的答案标记为正确，但我想针对该问题提出一个跨浏览器解决方案。
  • @jpetitte 我稍微更新了我的答案。测试链接的 codepen，让我知道它在你的 Edge 上是如何工作的。
  • 您的回答对我来说效果很好！我对我的 codepen 进行了最后添加，以便在此实现中（右侧 sidenav 占位符水平使用 225px，相邻行中的每个 flexbox 水平使用最小 200px），IE 11、Edge、Chrome 和 FF 中的格式看起来相同无论页面宽度是多少。我已经在问题的编辑 3 中解释了这一点。
  • @jpetitte 听起来很棒...在我的 Edge 版本中查看了最终版本。 16 就可以了。
  • 优秀。另外，我上面的评论有一个错误。我说的是“right sidenav”，而我的意思是“left sidenav”。
猜你喜欢
  • 2016-03-18
  • 1970-01-01
  • 2019-05-05
  • 1970-01-01
  • 2019-11-25
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode