MatSelect with appearance outline has weird height in table

[lemoinem]

Bug:

When a select in a mat-form-field with appearance outline is put in a table, its height get weirdly skewed compared to an input in a similar mat-form-field.

Issue happens, at least, on Windows, in Chrome, Opera, Firefox, Edge and IE 11. (Sounds like all browsers)

What is the expected behavior?

The select and the input should have the exact same height

What is the current behavior?

The select is weirdly disproportionate (too high) compared to the input.

What are the steps to reproduce?

https://stackblitz.com/edit/select-in-table?file=app%2Fselect-in-table.html

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

OS: Windows 10
Typescript version: 2.7.0 and later (up to 3.0.3)
Angular: 6.1.7
Material: 6.4.7

[lemoinem]

As a workaround, the following code seems to fix the issue without visibly changing the height of any inputs:

table .mat-form-field-appearance-outline .mat-form-field-flex
{
	// Force all inputs to have the same height.
	// Otherwise mat-select are doing their own thing and gain extra-height
	// https://github.com/angular/material2/issues/13198
	height: 4.2em;

	mat-select
	{
		margin-top: -4.2em;
	}
}

Obviously, this requires view encapsulation to be disabled for these rules (either using ViewEncapsulation.None or loading the CSS as a global style or using ::ng-deep with ViewEncapsulation.Emulated).