angular - Angular CDK 虚拟滚动 - IE11 中表格中的文本模糊

Question

我正在使用 Angular 7 和 angular/cdk ver 7.3.7。我创建了与本教程中的表大致相同的表： https ://www.thecodecampus.de/blog/virtual-scrolling-in-angular-7/

虽然表格中的文字在 Chome 和 Edge 中看起来很清晰，但在 IE11 中看起来很模糊。

有谁知道它为什么会发生或如何解决它？

谢谢您的帮助。

这是表格：

<cdk-virtual-scroll-viewport itemSize="24" class="cdk-content">
 <table class="list">
  <thead>
   <tr>
    <th>HEADER1</th>
    <th>HEADER2</th>
    <th>HEADER3</th>
    <th>HEADER4</th>
   </tr>
 </thead>
 <tbody>
  <ng-container *cdkVirtualFor="let rec of record_list;">
    <tr>
      <td>{{rec.item1}}</td>
      <td>{{rec.item2}}</td>
      <td>{{rec.item3}}</td>
      <td>{{rec.item4}}</td>
    </tr>
   </ng-container>
  </tbody>
 </table>
</cdk-virtual-scroll-viewport>

标签： angularangular-cdk

Answer 1

通过添加如下所示的 css 属性来修复它。

.cdk-content{
 ...
 transform : none;
 ...
}

cdk-virtual-scroll-viewport 的 transform 值默认设置为 translateZ(0px) ，这似乎使文本变得模糊。