Mat-form-field 在不同的浏览器中具有不同的高度答案

【问题标题】：Mat-form-field has different height in different browsersMat-form-field 在不同的浏览器中具有不同的高度
【发布时间】：2020-02-08 21:30:24
【问题描述】：

我有一个带有mat-form-field 输入的普通表单。表单包含一个日期字段和一个小时字段。这些字段在 chrome 中看起来不错：

但是，在 Firefox 和 Microsoft Edge 中，一个字段的高度比另一个字段高：

我不确定是什么原因导致了这种情况，尤其是我的组件没有对输入实现任何特殊样式。我只是在使用Flex Layout

<!-- Date and Time Start -->
          <div fxFlex
               fxLayout.lt-sm="column"
               fxLayoutGap="2%"
               fxLayoutAlign.gt-sm="space-around stretch"
               fxLayout="row">

            <!-- Date Start -->
            <mat-form-field appearance="fill"
                            fxFlex
                            color="accent">
              <input id="inputDateStart"
                     matInput
                     [formControl]="startDate"
                     (dateChange)="startDateChanged($event.value)"
                     [matDatepicker]="pickerStart"
                     [max]="startDatePickerMax"
                     placeholder="ab">
              <mat-error>{{ getErrorMsgForDate() }}</mat-error>
              <mat-datepicker-toggle matSuffix
                                     [for]="pickerStart"></mat-datepicker-toggle>
              <mat-datepicker #pickerStart></mat-datepicker>
              <mat-hint>Ab Aufnahmedatum</mat-hint>
            </mat-form-field>

            <!-- Time Start -->
            <app-w-mat-timepicker color="accent"
                                  id="timePickerStart"
                                  placeholder="von"
                                  [timeFormat]="24"
                                  [(userTime)]="startTimeToFilterFor"
                                  (userTimeChange)="startTimeChanged($event)"></app-w-mat-timepicker>
          </div>

还有我的时钟组件

<div fxFlex
     fxLayout="row">


  <mat-form-field fxFlex
                  appearance="fill"
                  color="accent">
    <input matInput
           [placeholder]="placeholder"
           [value]="time">
    <mat-hint>Uhrzeit</mat-hint>
    <mat-icon matSuffix
              (click)="showPicker($event)"
              svgIcon="clock"></mat-icon>
  </mat-form-field>
</div>

Stackblitz example

【问题讨论】：

标签： css angular angular-material angular-flex-layout

【解决方案1】：

问题出在日期选择器的图标上，太大了！

为了解决这个问题，我必须手动将图标添加到我的项目中，然后在 mat-datepicker-toggle 组件中使用它。

参考这个答案https://stackoverflow.com/a/48924487/4956266

【讨论】：

【解决方案2】：

Motassem Jalal 的答案是正确的。日期选择器的图标太大了。

但您不必添加自己的图标。您可以简单地更改 mat-datepicker-toggle 组件中的字体大小。

例如：

  mat-datepicker-toggle {
    font-size: 10px;
  }

在 html 中：

  <mat-form-field appearance="fill">
    <mat-label>Label</mat-label>
    <input matInput [matDatepicker]="dateToPicker" />
    <mat-datepicker-toggle matSuffix [for]="dateToPicker"></mat-datepicker-toggle>
    <mat-datepicker #dateToPicker></mat-datepicker>
  </mat-form-field>

【讨论】：