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

Posted 2023-03-05

【中文标题】如何防止 IE11 flexbox 在悬停时出现跳跃按钮？

【英文标题】：How do I prevent IE11 flexbox from having jumpy buttons on hover?

【发布时间】：2016-09-14 05:08:19

【问题描述】：

我有一个带有按钮的 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>

在两排按钮之间移动鼠标会导致大量移动。有什么办法可以防止这种情况发生吗？

【参考方案1】：

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

选项 1

footer 
  flex-basis: 46px;

选项 2

footer 
  min-height: 46px;

【参考方案2】：

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

.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

【讨论】：

谢谢，这比另一个更灵活，不需要知道具体的高度。我将它与仅限 IE 的 @media 查询结合使用，这样其他浏览器按钮不会受到影响。