css - Mat-form-field 在不同的浏览器中有不同的高度

Question

我有一个普通表单，里面有 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

Answer 1

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

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

引用这个答案https://stackoverflow.com/a/48924487/4956266