微軟邊緣上的按鈕調整問題懸停

這是我的HTML和CSS：fiddle 微軟邊緣上的按鈕調整問題懸停

.right { 
 
    float: right; 
 
} 
 
.scroll { 
 
    max-height: 100px; 
 
    overflow-y: auto; 
 
}

<div class="right"> 
 
    <button>x</button> 
 
    <div class="scroll"> 
 
     <div>testtesttesttest testtest</div> 
 
     <div>testtesttesttest testtest</div> 
 
     <div>testtesttesttest testtest</div> 
 
     <div>testtesttesttest testtest</div> 
 
     <div>testtesttesttest testtest</div> 
 
     <div>testtesttesttest testtest</div> 
 
     <div>testtesttesttest testtest</div> 
 
    </div> 
 
</div>

當我將鼠標懸停在微軟按鈕封邊內的div被調整。

在這個簡單的版本中，我可以產生按鈕懸停的錯誤，但在我的實際情況下，當我點擊窗口上的任何位置時發生調整大小。

來源

2017-04-10 nilgun

這是一個奇怪的行爲...懸停的東西很可能是觸發按鈕restyle，影響不確定的寬度尺寸（擴展與縱向滾動）兄弟元素......這是渲染錯誤，可以通過顯式定義兄弟元素寬度來解決。 –

PS：它看起來像Edge不喜歡不確定性......設置.scroll overflox-y滾動而不是自動清除問題。我的猜測是，當按鈕懸停時發生元素樣式和位置的重新計算時，Edge會從.scroll中刪除滾動條，減少元素的總寬度，然後意識到它超過了最大高度，再次添加滾動條，但不考慮將其添加到總寬度 - nudging它的內容是斷線......這只是一個分析猜測，我可能是錯的。 –

最後我不認爲問題在於HTML本身，CSS本身......你只是在給很多不確定的價值留下難以磨滅的邊緣，Edge並沒有很好地處理。 –

雖然這不是完美的解決方案。將display: inline設置爲.scroll並再次懸停狀態來解決問題。

試試這個邊緣 Code pen link

來源

2017-04-10 09:45:24 MIRobin

不幸的是，您的解決方案清除了y滾動和最大高度屬性。 – nilgun

我只是嘗試與按鈕邊框。如果我們設置一個邊框或邊框寬度爲0，那麼它不會破壞線條。請檢查代碼筆的鏈接。我已經更新了。 – MIRobin

@MonirulIslam這是因爲你刪除基於瀏覽器的元素（按鈕）默認樣式 –

微軟邊緣上的按鈕調整問題懸停

回答

相關問題