在mat-form-field中设置行高时，IE11中的输入文本会跳转

Question

mat-form-field的行高最初设置为1.125。当用较高的值（例如1.5）覆盖它时，会在mat-form-field内嵌套的输入元素中导致跳跃效果。聚焦/模糊时，文本会上下跳动。

要查看此问题，请在Internet Explorer中打开此stackblitz，在输入字段中键入一些内容，然后对该字段进行多次聚焦/模糊处理。输入的文本将上下跳动。当您删除line-height属性时，它不会跳转。 https://stackblitz.com/edit/angular-z1efak

我已经将此问题发布为角度/材料项目（https://github.com/angular/material2/issues/12769）

有人知道如何处理该问题以及为什么会这样吗？在Chrome中，一切正常运行。

Answer 1

之所以发生这种情况，是因为您要覆盖默认的行高，并且for字段根据行高执行大量计算，以确定for字段其他方面的大小。而且，由于IE11和Chrome的输入元素并不相同，因此这些更改的结果是不可预测的，并且很可能从未经过测试。

一种快速解决方法（修改您的技巧）是将原始行高设置回输入元素：

.mat-form-field {
  line-height: 1.5;
}

.mat-input-element {
  line-height: 1.125;
}