Firefox 在 Angular Material 表单字段中添加了额外的空间答案

【问题标题】：Firefox adds extra space in Angular Material form fieldFirefox 在 Angular Material 表单字段中添加了额外的空间
【发布时间】：2021-07-14 15:58:43
【问题描述】：

我正在使用角度反应形式。其中一个表单字段使用日期选择器，它在 chrome 中看起来像这样。

但是，在 Firefox 中，它会在顶部增加额外的空间。

为了修复它，我尝试将bottom: 6px 添加到 dev-tools (firefox) 中的 mat-form-field-infix 中，它似乎有效。但是如果我在 chrome 中添加相同的属性，则 chrome 中的对齐会出错。知道如何解决这个问题吗？

【问题讨论】：

【解决方案1】：

您可以添加 Firefox 浏览器特定的 CSS。

有两个选项可以包含在您的 CSS 文件中

使用 @-moz-document url-prefix()

     @-moz-document url-prefix() { 
         .mat-form-field-label-wrapper { 
             margin-top: -6px; 
         } 
     }

使用 @supports (-moz-appearance:none)

 @supports (-moz-appearance:none) {
     .mat-form-field-label-wrapper { 
             margin-top: -6px; 
     } 
 }

【讨论】：