位置内的 Flex 内容宽度未正确计算：IE11 中的固定容器答案

【问题标题】：Flex content width not calculated correctly inside a position: fixed container in IE11位置内的 Flex 内容宽度未正确计算：IE11 中的固定容器
【发布时间】：2019-02-17 10:15:49
【问题描述】：

我正在构建一个自定义工具提示，它使用position: fixed 和动态top 和left 来跟随您的鼠标光标。工具提示具有使用 flexbox 构建的相对复杂的布局。我遇到了 IE11 的问题（否则它使用 autoprefixer 就可以很好地支持 flexbox），其中工具提示的宽度被折叠起来，就好像它没有内容一样。

我做了一个 Codepen，去掉了我所有的实现细节，除了最基本的 Bootstrap 布局和 CSS，问题仍然存在。您可以在此处https://codepen.io/ryangiglio/pen/xajLJr 看到它的实际效果。代码如下：

HTML

<!-- Regular content -->
<div class="container-fluid">
  <div class="row">
    <div class="col-4 text-center">
      Column
    </div>
    <div class="col-4 text-center">
      Column
    </div>
    <div class="col-4 text-center">
      Column
    </div>
  </div>
</div>

<!-- Tooltip content -->
<div class="custom-tooltip">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12 text-center">
        Tooltip Title
      </div>
    </div>
    <div class="row">
      <div class="col-4 text-center">
        Column
      </div>
      <div class="col-4 text-center">
        Column
      </div>
      <div class="col-4 text-center">
        Column
      </div>
    </div>
  </div>
</div>

CSS

.custom-tooltip {
  position: fixed;
  top: 50px;
  left: 50px;
  background: white;
  box-shadow: 0 0 5px 1px black;
}

这就是它在 Chrome 中的样子

以及它在 IE11 中的外观

【问题讨论】：

整页模式适用于 IE11 ，调试模式取决于：如果您已登录，未过期，您（或我）是否有专业帐户...

标签： css internet-explorer flexbox bootstrap-4 internet-explorer-11

【解决方案1】：

您提供的链接无效，因为我不是专业会员。

另一方面，我不确定，但可能是当您设置 box shadow 属性时它会更改显示，但我不确定并且想测试该理论但不能。
--- 已编辑
试试下面的代码，你还必须确保你正确设置了 flex-direction 属性。

div.custom-tooltip{ 
  display: flex; 
  flex-direction:column; 
} 
div.row{ 
  display: flex; 
  flex-direction:row; 
}

--- 编辑后的答案---

/* 
I set the tooltip box containers 
width to be a percentage, I don't
know if this a documented issue 
with ie11 or not, where ie 11
doesn't realize that flex is being 
used on a fixed element and goes with
default values for width.  

*/
div[data-tooltip-boxwidth="300"] {
 width: 20%;
}

【讨论】：

div.custom-tooltip{ display: flex;弹性方向：列； } div.row{ 显示：弹性；弹性方向：行； }
抱歉，我更新了链接。不幸的是，这不是盒子阴影。
悲伤的一天，:( ...反正我会尝试像这样手动设置工具提示框的宽度 => codepen.io/kipomaha/pen/JaZNbMcss 中留下的评论

【解决方案2】：

不幸的是，我没有足够关心这里的潜在问题而花费更多时间来解决它，所以我最终在 .custom-tooltip 类上硬编码了一个宽度，它解决了这个问题，足以让我发布它.

【讨论】：