我在material 6和flex layout 6-beta中使用angular 6，目前我面临一个奇怪的问题，具有fxflex属性的表单字段根本不会出现在ie中，尽管它们在所有其他主流浏览器中都显示得很好。
我已经配置了polyfills.ts，以便应用程序在Internet Explorer上运行，但我不知道如何解决此问题。
例如，考虑下面的两个表单字段，一个没有fxflex的字段将出现在ie中，而另一个没有显示
在这里的两个段落中，都显示了（即使是有fxflex的那一个），问题似乎是具体的（fxflex，mat form field&ie）
<mat-form-field fxFlex="25">
<input matInput name="dob_day" placeholder="{{'dob_day'| translate}}" [(ngModel)]="data.dob_day" pattern='(0?[1-9]|[12][0-9]|3[01])'
maxlength="2" required>
</mat-form-field>
<mat-form-field >
<input matInput name="dob_day" placeholder="{{'dob_day'| translate}}" [(ngModel)]="data.dob_day" pattern='(0?[1-9]|[12][0-9]|3[01])'
maxlength="2" required>
</mat-form-field>
<p fxFlex="25" >hello , how are you?</p>
<p>hello , how are you?</p>
我当前的polyfills.ts：
/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
import 'classlist.js'; // Run `npm install --save classlist.js`.
/** IE10 and IE11 requires the following for the Reflect API. */
import 'core-js/es6/reflect';
/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';
/**
* Required to support Web Animations `@angular/platform-browser/animations`.
* Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
**/
import 'web-animations-js'; // Run `npm install --save web-animations-js`.
/**
* By default, zone.js will patch all possible macroTask and DomEvents
* user can disable parts of macroTask/DomEvents patch by setting following flags
*/
// (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
// (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
// (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
/*
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
* with the following flag, it will bypass `zone.js` patch for IE/Edge
*/
// (window as any).__Zone_enable_cross_context_check = true;
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
/***************************************************************************************************
* APPLICATION IMPORTS
*/
如有任何帮助，我们将不胜感激。
最佳答案
我发现为了让ie11正确地处理mat表单字段，需要将表单字段包装在div标记中。不需要向这个div标记添加任何属性。
为了在IE11中实现这种表单布局…
IE 11 Form Layout...
这是我使用的代码：
<div flLayout="column" fxLayoutGap="7px" fxLayoutGap.xs="0px">
<div fxLayout="row" fxLayout.xs="column" fxLayoutGap="7px" fxLayoutGap.sm="0px">
<mat-form-field fxFlex appearance="outline">
<mat-label>First Name</mat-label>
<input matInput formControlName="firstName">
</mat-form-field>
<mat-form-field fxFlex appearance="outline">
<mat-label>Last Name</mat-label>
<input matInput formControlName="lastName">
</mat-form-field>
</div>
<div>
<mat-form-field fxFlex appearance="outline">
<mat-label>Title</mat-label>
<input matInput placeholder="Title" formControlName="title">
</mat-form-field>
</div>
</div>
注意“title”表单字段周围的div标记。
通过这个添加，ie 11表现良好，对其他浏览器的渲染没有影响。
关于angular - 将fxFlex与mat-form-field一起使用时，Angular Material Flex-layout，元素不会出现在Internet Explorer 11中，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50585986/