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

Question

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

然而，在 Firefox 中，它在顶部增加了额外的空间。

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

标签： cssangularfirefoxangular-material

Answer 1

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

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

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

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

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

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