如何防止 IE11 flexbox 在悬停时出现跳跃按钮？

Question

我有一个带按钮的 flexbox 布局。当用户将鼠标移到按钮上时，它们的位置会跳跃。

我的源代码很简单：

.flexy { 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 200px;
}

<div class="flexy">
  <div>
    Content
  </div>
  <footer>
    <button>Button 1</button> <button>Button 2</button><br/>
    <button>Button 3</button> <button>Button 4</button><br/>
  </footer>
</div>

在两行按钮之间移动鼠标会导致大量移动。我可以使用修复程序来防止这种情况发生吗？

Answer 1

我不确定是什么导致了这个问题。但我发现，如果您只是 在按钮上添加一个边框 ，移动就会停止。

.flexy { 
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  height: 200px;
}

button {
  border: 1px solid #777;
  padding: 5px;            /* optional */
  margin: 5px;             /* optional */
}

<div class='flexy'>
  <div>
    Content
  </div>
  <footer>
    <button>Button 1</button> <button>Button 2</button><br/>
    <button>Button 3</button> <button>Button 4</button><br/>
  </footer>
</div>

Revised Demo

Answer 2

给你的 footer 一个 min-height 或 flex-basis 值是页脚的实际高度。我在 IE11、Chrome、Firefox、Safari 中对此进行了测试，它们都接受了此修复。

选项 1

footer {
  flex-basis: 46px;
}

选项 2

footer {
  min-height: 46px;
}

如何防止 IE11 flexbox 在悬停时出现跳跃按钮？

How do I prevent IE11 flexbox from having jumpy buttons on hover?

html

css

flexbox

internet-explorer-11