Flex 在 chrome 中工作，但在 IE 中不工作

Posted 2023-03-05

【中文标题】Flex 在 chrome 中工作，但在 IE 中不工作

【英文标题】：Flex works in chrome but not in IE

【发布时间】：2020-01-23 11:20:35

【问题描述】：

代码的html结构如下图所示。现在我将 background:red 赋予时间线类名（以检查在最小化和最大化窗口大小时孩子是否缩小或增长）。 时间轴是集群、事件项、今天、今天日期的父级。

当我尝试通过重新缩放窗口大小来最小化和最大化时，在 chrome 中它运行良好，但在 IE 中它被破坏了。

我不确定我哪里出错了。似乎时间线不是灵活增长：1。

代码结构

<div class="data">
    <div class="dataselect__main "> 
        <div class="dataselect__content" >
        <div class="logic_scrollbararea">
            <div class="timeline">
                ::before
                <div class="data__moredata--buttoncontainer">
                    <div class="data__moredata--button">
                    </div>
                </div>
                <div class="timeline__item__cluster" ></div>
                <div class="timeline__item__eventItem" ></div>
                <div class="timeline__item__todayItem "></div>
                <div class="timeline__item__todaydateItem "></div>
                <div class="timeline__nodataavailable" ></div>
                ::after
            </div>
        </div>
    </div>
</div>

css

.dataselect__main
    height: 100%;
    overflow: hidden;
    display:flex;
    flex:1;

.dataselect__content
    overflow: hidden;
    position: absolute;
    left: 0;
    height: 100%;
    width: 100%;
    display:flex;
    flex:1;
    min-height:0;
    min-width:0;

.logic_scrollbararea
    display: inherit;
    overflow: hidden;
    padding: 0px;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;


.timeline 
    height: 100%;
    padding-top: 3.125rem;
    position: absolute;
    min-width: 100%;
    background:red;
 
.timeline:before 
    content: "";
    height: 0.375rem;
    border-radius: 0.3125rem;
    border: 0.125rem solid #1f1f1f;
    background-color: #2d6483;
    display: block;
    top: 3.125rem;
    left: 0;
    right: 0.25rem;
    margin-top: 0.4375rem;

.timeline:after 
    content: "";
    border-radius: 0.5rem;
    border: 0.125rem solid #1f1f1f;
    background: #389dd5;
    top: 3.125rem;
    right: 0;
    margin-top: 0.25rem;
    width: 0.75rem;
    height: 0.75rem;

【问题讨论】：

烧掉，即......烧掉它！！！！ caniuse.com/#search=flex

@ScottChambers 是的。我检查了这个，IE 11 支持 flex。

【参考方案1】：

在时间轴上使用width:100% 而不是min-width: 100%。所以你的时间线代码将是：

.logic_scrollbararea 
    width: 100%;


.timeline 
    height: 100%;
    padding-top: 3.125rem;
    position: absolute;
    background: red;
    width: 100%;

Flex 支持 IE 11，所以在 IE 中输出

【讨论】：

我试过了，但宽度和我之前展示的一样。可能是时间轴的父 div 阻塞宽度左右。

我也试过用 IE 11 测试这个问题，看起来使用 width 而不是 min-width 可以解决这个问题。你能试着用上面的例子来看看输出吗？如果它有效，则可以尝试在原始代码中实现。

我也试过这个也没用。这里将宽度增加到 200% 以查看它是否真的需要 css 并且它确实改变了..似乎宽度：100% 是它所需要的..

timeline__item__cluster 有一些内容。当内容缩小时，一切看起来都很好。当内容水平展开时，内容簇增加，由于指定的宽度，出现滚动条，但“时间轴”本身没有增长。

看起来像您在原始帖子中提供的示例，并且您在上面发布的图像不匹配。请尝试检查并验证您的代码是否能够以与图像所示类似的方式产生问题。它可以帮助我们更好地理解问题。

【参考方案2】：

IE 11 支持：弹性

IE 10 : 仅弹性盒

旧浏览器有语法：

  .page-wrap 
      display: -webkit-box;      /* OLD - ios 6-, Safari 3.1-6 */
      display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
      display: -ms-flexbox;      /* TWEENER - IE 10 */
      display: -webkit-flex;     /* NEW - Chrome */
      display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

 

【讨论】：

我尝试了 this.instead of display flex，我给了 -ms-flexbox。没有按预期工作。 className 时间线似乎具有窗口大小的宽度，当我缩小或扩大窗口大小时，时间线不会扩大或缩小。