微软边缘上的按钮调整问题悬停

这是我的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这是因为你删除基于浏览器的元素（按钮）默认样式 –

微软边缘上的按钮调整问题悬停

回答

相关问题