MAT-FORM-FIELD-OUTLINE 标签文本与表单域轮廓边框重叠答案

【问题标题】：MAT-FORM-FIELD-OUTLINE label text overlapping with form-field-outline borderMAT-FORM-FIELD-OUTLINE 标签文本与表单域轮廓边框重叠
【发布时间】：2020-09-17 20:00:47
【问题描述】：

在我的应用程序中，我有 3 步 mat-stepper 过程。在 First stepper 中，我有 mat-form-field 轮廓，它工作正常，但在 Second Stepper 和 Third Stepper 中，我有相同的 mat-form-field 轮廓，但标签与边框线重叠，如下所示。

<mat-form-field appearance="outline">
      <mat-label>Member ID *</mat-label>
      <input matInput placeholder="Test" 
                   formControlName="memberID"                             
                   [(ngModel)]="submitPaymentRequest.getAccount().acctNum">
       <mat-placeholder>TEst</mat-placeholder>
       <mat-error app-validation-message></mat-error>
</mat-form-field>

我可以看到这种情况发生在 IE 中，而不是在 Chrome 中。

任何人都可以帮助解决这个问题。提前致谢

【问题讨论】：

请分享代码
我在我的 Angular Web 应用程序项目中使用了相同的 'mat-form-field appearance="outline"' 代码，并通过 ios 应用内浏览器加载了我的应用程序，相同的标签与边框重叠线，它发生在iphone 7中。专家对此的任何解决方案。

标签： css angular typescript angular-material

【解决方案1】：

很遗憾，Material Angular 不能正确支持 IE（官方支持 IE11+...）。

如果 IE 支持对您的项目很重要，请使用 https://materializecss.com/ 之类的其他内容

【讨论】：