Question

我有一个下拉菜单，其中包含多行文本。我想在固定高度的下拉列表中显示所有文本，为此我使用min-height来设置高度，如果文本长度大于下拉列表的高度，则要进行滚动，请使用overflow: auto 。在Chrome / Firefox中，它工作正常，但在Microsoft Edge中，文本看起来模糊。下面的示例：

最初，我认为它与popover.js和显示下拉菜单时CSS转换使用的gpuAcceleration有关，但是我修复了该问题，文本仍然显得模糊。

编辑（源代码）：

<div class="col-lg-8 col-md-8 col-sm-8">
   <div class="nav-link dropdown-toggle d-inline-block" id="selectOptionThree" data-toggle="dropdown 
              aria-haspopup="true" aria-expanded="false" (click)="showDescriptionOptionThree(optionThree)">
       <button class="btn btn-danger btn-sm pointer">Info</button>                                                                                        
   </div>
   <ul class="dropdown-menu col-lg-12" aria-labelledby="selectOptionThree" style="max-height :400px; overflow: auto;">
       <div id="optionThree"></div>
   </ul>
</div>

该函数从后端服务获取文本，并将其附加到id为“ optionThree”的div元素。

Answer 1

经过几次搜索后，我发现使用此属性：

height: auto;
max-height: 400px; 
overflow: hidden;

解决了问题。仅当在Microsoft Edge中使用带有溢出的固定高度下拉菜单时，才会出现此问题。希望这也会对其他人有所帮助。

溢出：自动和固定高度使Microsoft Edge中的下拉文本模糊

1 个答案: