如何防止IE11 flexbox在懸停時出現跳動按鈕？

我有一個帶按鈕的flexbox佈局。當用戶將鼠標移動到按鈕上方時，他們的位置會跳轉。如何防止IE11 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/

來源

2016-05-17 user1219358

我真的不知道是什麼導致的問題。但我發現，如果你只是添加一個邊框到移動停止的按鈕。

.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

來源

2016-05-17 23:38:28

謝謝，這是不需要知道具體的高度比其他更靈活一點。我將它與僅限IE的@media查詢結合起來，以便其他瀏覽器按鈕不受影響。 – user1219358

給你一個footer或min-height與flex-basis值是頁腳的實際高度。我在IE11，Chrome，Firefox，Safari中測試了它們，並且它們都與此修補程序相處得很好。

選項1

footer { 
    flex-basis: 46px; 
}

選項2

footer { 
    min-height: 46px; 
}

來源

2016-05-17 23:56:30

如何防止IE11 flexbox在懸停時出現跳動按鈕？

回答

相關問題