Question

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

我的css很简单：

.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>

在两排按钮之间移动鼠标会导致大量移动。我可以用它来解决这个问题吗？

这是一个小提琴：https://jsfiddle.net/dw05jzdu/1/

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在悬停时出现跳跃按钮？

2 个答案: