IE和Edge flexbox的bug？ [英] IE and Edge flexbox bug?

查看：426
本文介绍了IE和Edge flexbox的bug？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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



图片2）在窗口展开的情况下（在Edge中没有水平滚动以显示在水平滚动生效时没有内容被隐藏）：



我已经在Windows 10下测试了Edge的这个功能，创作者更新版本（微软EdgeHTML 16），现在已经修复并正常工作。



这里是另一个帖子关于相同的问题，其中IE的一个解决方法是使用 scroll auto （ overflow-x：scroll ）



根据评论更新



这是一个试图找到一个基于CSS的黑客，将检测IE 11和边缘12 - 15，

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

  @media screen和（-ms-high-contrast：active），（-ms-high-contrast：none）{
 .app-content {
 overflow-x：scroll; 
 
 
 
 
 
 
 $ b 
对于Edge而言，这个CSS hack似乎已经证明是可行的： / b> 
 
 
以下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）），我们应该能够从16的边缘12-15 
 
 $ $ p $ $ $支持（-ms-ime-align：auto）和（not（object-fit：封面））{
 .app-content {
 overflow-x：scroll; 
 
 
 
 
 
 $ b $ p如前所述，在未来的MS Edge中尽可能多地包含 -ms 前缀属性，尽管我们不介意，因为我们希望针对仍然有它们的旧版本 
 
 
 
我已经使用这个Codepen在IE 11和Edge 16上成功测试了上面的2个CSS hacks： 
 
 
 
 
 
 
 
 
如果有人发现这不适用于特定的Edge版本，请让我知道
 
 
 
对于喜欢使用Javascript的人来说，这里有一些有趣的阅读：
 
 
 
I've noticed an anomaly in Edge and IE when using flexbox with scrolling columns coupled with a horizontal scroll. The following codepen demonstrates correct functionality in Chrome and FireFox; however, there is an extra scroll bar on the very right of the view for a slight vertical overflow (the height of the horizontal scroll bar) that is only present in IE 11 and Edge:



Original Codepen Example






The raw html for reference:
<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>

The raw css for reference:
 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;
 }

Notes: 
    

  1. I have semantic-ui loading in the codepen for basic styling, but the layout is developed using pure flexbox (not the semantic grid system).
    2. 

  2. Semantic ui already uses normalizer, so it is turned off in the codepen css.
    3. 

  3. In codepen I have "autoprefixer" turned on.
    4. 

  4. When viewing in IE, adjust the height of the preview window, and the preview window's vertical scroll bar will suddenly show scrolling.
    5. 

  5. All of my custom classes are prefixed with "app-".
    6. 

Below are pictures of what seems to be a working implementation of this concept by the folks over at Asana; however, I am struggling to understand the implementation.



Image 1) With the window collapsed resulting in correct horizontal scrolling in Edge, no content hidden at the bottom of the screen, and no extraneous scroll bar at the very left of the view:






Image 2) With the window expanded (and no horizontal scrolling in Edge to demonstrate no content was hidden when horizontal scrolling was in effect):






So, is this actually a bug in IE and Edge, or does the seemingly functional implementation by Asana demonstrate a work around?



Edit 1) Added more in-depth description of the anomaly. 



Edit 2) Added updated codepen link to track cross browser progress.



Edit 3) Updated final codepen with functional hacks. Functionality should now look identical across IE11, Edge, Chrome, and FF. The complete functional hack list is:
@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; 
  }
}

The following media query reverts overflow-x to auto in browsers where it was set to scroll (see hacks just above this one) when the browser width is greater than 825px. This number is derived from the 225px used for the left side-nav, and the 200 px minimum used for each flexbox item to the right of the side-nav. This prevents an extraneous horizontal scroll bar in IE11 and Edge when browser width is greater than 825px.
@media (min-width: 825px) {
  .app-content {
    overflow-x: auto;
  }
}

Final (updated with functional hacks) Codepen Example
 解决方案 
This is obviously a bug (haven't found any bug report yet and will update when I do).



I have tested this with Edge on Windows 10 Fall Creators Update version (Microsoft EdgeHTML 16), and is now fixed and work as it should.



Here is another post about the same issue, where one workaround for IE is to use scroll instead of auto (overflow-x: scroll)






Updated based on a comment



This is an attempt to find a CSS based hack that will detect IE 11 and Edge 12-15.



This IE 11 CSS hack appears to work properly:
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
  .app-content {
    overflow-x: scroll; 
  }
}

For Edge this CSS hack appears proven to work:



The following hack seems to work to find Edge:
@supports (-ms-ime-align: auto) {
  .app-content {
    overflow-x: scroll; 
  }
}

Though this also catch Edge 16, but here we got lucky as Edge 16 added support for object-fit



So by simply check for both the (-ms-ime-align: auto) and (not (object-fit: cover)), we should be able to actually distinct Edge 12-15 from 16
@supports (-ms-ime-align: auto) and (not (object-fit: cover)) {
  .app-content {
    overflow-x: scroll; 
  }
}

As noted, Microsoft appears moving to remove as many -ms prefixed properties as possible in future MS Edge, though we don't mind, as we want to target the older versions that still has them



I have tested the above 2 CSS hacks with success on IE 11 and Edge 16 using this Codepen:








If anyone find this not work on a specific Edge version, please let me know so I can keep this post up to date.



For you who prefer to use Javascript, here is a post with some interesting reading:




                        
这篇关于IE和Edge flexbox的bug？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆