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 组件中使用它。

参考这个答案

Answer 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>

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

Mat-form-field has different height in different browsers

css

angular

angular-material

angular-flex-layout