具有绝对位置的 Flexbox 容器不适合 IE 中的内容宽度

Posted 2023-03-06

【中文标题】具有绝对位置的 Flexbox 容器不适合 IE 中的内容宽度

【英文标题】：Flexbox container with position absolute doesn't fit content width in IE

【发布时间】：2018-02-13 10:41:20

【问题描述】：

我是 flexbox 新手，我的问题如下：

我的导航上有一个子菜单，绝对定位并使用 flexbox。

在 Chrome / Firefox 中一切正常，没有测试 Safari。

IE11 正在显示我的子菜单，但它的子元素溢出（这破坏了我的 :hover）。

在 IE 中检查这个 codepen 以查看问题（简化版）：

https://codepen.io/CamilleVerrier/pen/GvLojN

我尝试了 *** 或 CanIUse 中建议的很多东西，比如单独设置 flex 属性：

ul.sub-menu li 
    flex-grow:0;
    flex-shrink:1;
    flex-basis:0px;

但它似乎不起作用。

在我的测试过程中，我发现如果我删除 position:absolute，一切都会恢复正常（但我的菜单明显坏了）。

那么...返回 inline-block 或 float 的解决方案是什么？ （请不要啊）

谢谢！ （对不起我的英语）

/* General styles */

body 
  background: tomato;
  font-size: 1.2rem;
  font-weight: bold


a 
  color: black;
  text-decoration: none;


li 
  list-style: none;


ul li 
  font-size: 1.6rem;
  display: inline-block;
  margin-left: 40px;
  text-transform: uppercase;


ul li.menu-metier 
  position: relative;
  padding-bottom: 25px;



/* SubMenu */

ul.sub-menu 
  display: -webkit-box;
  display: flex;
  display: -ms-flexbox;
  position: absolute;
  background: white;
  top: 45px;
  left: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);


ul.sub-menu li 
  margin: 10px;
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;


ul.sub-menu li a 
  display: -ms-flexbox;
  display: flex;
  flex-direction: column;


ul.sub-menu li a img 
  padding: 0;
  margin-bottom: 5px;
  align-self: center;


ul.sub-menu li a span 
  text-align: center;
  font-size: 1rem;
  align-self: center;

<ul>
  <li><a href="#"><span>Accueil</span></a></li>
  <li class="menu-metier"><a href="#"><span>Notre métier</span></a>
    <ul class="sub-menu">
      <li>
        <a href="#">
          <img   src="http://lorempixel.com/170/102">
          <span>Séminaire et Incentive</span>
        </a>
      </li>
      <li>
        <a href="#">
          <img   src="http://lorempixel.com/170/102">
          <span>Congrès et rencontres</span>
        </a>
      </li>
      <li>
        <a href="#">
          <img   src="http://lorempixel.com/170/102">
          <span>Communication Design</span>
        </a>
      </li>
    </ul>
  </li>
  <li>
    <a href="#">
      <span>L’agence</span>
    </a>
  </li>
  <li>
    <a href="#">
      <span>Photos</span>
    </a>
  </li>
</ul>

【参考方案1】：

问题与flexbox无关。

这是浏览器之间绝对定位渲染变化的问题。

当您在一个元素上设置position: relative 时，它会为具有position: absolute 的后代设置边界框。

在 Chrome 中，绝对定位的后代允许溢出边界框。

在 IE11 中，它们不是。一旦达到边界框的限制，绝对定位的元素就会被截断。

一种解决方法是从容器中删除position: relative。现在绝对定位的子菜单有一个更大的边界框（基于最近的定位祖先，如果不存在，则基于初始包含块（即视口））。

ul li.menu-metier 
   /* position: relative; */
   padding-bottom: 25px;

revised demo

另一种解决方法是调整right 偏移量以适应内容。

ul.sub-menu 
    right: -600px;

revised demo

您也可以尝试设置宽度。

这些选项都不漂亮。但话又说回来，我们正在处理 IE。

您可以通过搜索找到其他解决方法。

【参考方案2】：

删除flex-basis 似乎可以解决IE 上的问题，但您必须设置width 才能解决后台问题。

https://codepen.io/anon/pen/wqZWav

【讨论】：

目前我找不到其他解决方案。如果可以的话，会出一个更好的。只是想指出flex-basis的问题

糟糕，我没有撤消我之前在 codepen 上的测试，flex-basis 通常设置为 auto ！如果它是唯一的解决方案，我会设置一个宽度，但我更喜欢另一种解决方案，一个“灵活”的解决方案。无论如何谢谢你;）