CSS：错误的元素宽度和位置 IE11（flexbox、位置、变换）

Question

我在 Internet Explorer 11 中的飞行数小时以来一直在苦苦挣扎。

我有一个带有两个子元素的header。我用flexbox space-between 显示它们。第二个元素（在标题的右侧）具有position relative 和一个具有position absolute 的子元素。单击时，我使用transform translateY 为元素的位置设置动画，并使用transform translateY，因此它将直接滑入标题中右侧元素的下方。这适用于除 IE11 之外的所有浏览器，其中 flyin 位于右侧（垂直溢出可见）并且宽度不包括最后一个元素。

当我在元素.header__selection 上使用padding-right: 100px; 时，浮出控件位于视口右侧，框宽度覆盖所有元素。此外，当我在父元素上删除 position relative 时，框宽度是正确的。我不知道这里有什么问题。我猜位置和弹性盒有一些问题。希望有一些意见。

使用 sn-p 在不同的浏览器上进行测试。这是它在 IE11 上的屏幕截图：

const selection = document.querySelector('.header__selection');
const flyin = document.querySelector('.header__selection-flyin');

selection.addEventListener('click', function() {
  flyin.classList.toggle('state-header__selection-flyin--open');
});

body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.header {
  background-color: white;
  border-bottom: 1px solid gray;
  
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  height: 60px;
  width: 100%;
}

.header__selection {
  position: relative;
}

.header__selection-flyin {
  display: flex;
  background-color: lightcoral;
  border: 1px solid black;
  position: absolute;
  transform: translateY(-100%);
  transition: transform 0.3s ease-in-out;
  right: 0;
  z-index: -1;
}

.header__selection-flyin-item {
  padding: 5px 10px;
}

.state-header__selection-flyin--open {
  transform: translateY(100%);
  z-index: 1;
  transition: transform 0.3s ease-in-out, z-index 0.3s 0.2s;
}
  

<header class="header">
  <div class="header__logo">Logo</div>
  <div class="header__selection">
    <div class="header__selection-active">
      Selected Item
    </div>
    <div class="header__selection-flyin">
      <div class="header__selection-flyin-item">Item</div>
      <div class="header__selection-flyin-item">Item</div>
      <div class="header__selection-flyin-item">Item</div>
    </div>
  </div>
</header>

Answer 1

我尝试使用 IE 11 浏览器测试问题，我可以使用您的代码产生问题。

我尝试检查 CSS 代码，发现如果在 .header__selection-flyin 中将 position 从 absolute 更改为 fixed 类然后问题可以解决 IE 11 浏览器。

 position: relative;
 to
 position: fixed;

修改代码：

const selection = document.querySelector('.header__selection');
const flyin = document.querySelector('.header__selection-flyin');

selection.addEventListener('click', function() {
  flyin.classList.toggle('state-header__selection-flyin--open');
});

body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.header {
  background-color: white;
  border-bottom: 1px solid gray;
  
  display: flex;
  justify-content: space-between;
  align-items: center;
 
  height: 60px;
  width: 100%;

}

.header__selection {
  position: relative;

}

.header__selection-flyin {
  display: flex;
  background-color: lightcoral;
  border: 1px solid black;
  position: fixed;
  transform: translateY(-100%);
  transition: transform 0.3s ease-in-out;
  right: 0;
  z-index: -1;

}

.header__selection-flyin-item {
  padding: 5px 10px;

}

.state-header__selection-flyin--open {
  transform: translateY(100%);
  z-index: 1;
  transition: transform 0.3s ease-in-out, z-index 0.3s 0.2s;
}

<header class="header">
  <div class="header__logo">Logo</div>
  <div class="header__selection">
    <div class="header__selection-active">
      Selected Item
    </div>
    <div class="header__selection-flyin">
      <div class="header__selection-flyin-item">Item</div>
      <div class="header__selection-flyin-item">Item</div>
      <div class="header__selection-flyin-item">Item</div>
    </div>
  </div>
</header>

在 IE 11 浏览器中的输出：