Heim > Artikel > Web-Frontend > Einführung in Methoden zur Lösung von Browserkompatibilitätsproblemen in Angular
Wie kann das Browserkompatibilitätsproblem in
angular gelöst werden? Der folgende Artikel stellt es Ihnen vor. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.
Empfohlene verwandte Tutorials: „angular Tutorial“
Problem: Unter dem Randbrowser verschwindet der Rand der festen Spalte
Grund: ng-zorro-antd-Tabellenkomponente Verwendet die festen Tabellenspalten nzLeft und nzRight. Die Implementierung dieser beiden Anweisungs-Tags in CSS3:
position: -webkit-sticky !important; position: sticky !important;
Google-, Firefox- und -webkit-kernel-Browser unterstützen alle dieses Attribut (css3), IE unterstützt dieses Attribut nicht, daher im IE , es wird automatisch herabgestuft. Die Tabelle hat keine festen Spalten und ist in einer gleitenden Form.
Edge-Browser verwendet den Chromium-Kernel in Versionen nach 1703, der CSS3-Attribute besser unterstützt und auch das Sticky-Attribut unterstützt. Es können feste Tabellenspalten verwendet werden, der Rand verschwindet jedoch.
Lösung:
Die derzeit möglichen Lösungen lauten wie folgt:
Bei der Downgrade-Verarbeitung des Edge-Browsers stimmt der Effekt mit dem des IE-Browsers überein, es gibt keine festen Spalten und das Ganze kann horizontal gescrollt werden.
position: absolute;
auf diese Weise verwenden. Der detaillierte Prozess des zweiten Plans ist wie folgt:
Verwenden Sie p, um die Tabelle zu umbrechen. Wenn die Breite der Tabelle die Breite von p überschreitet, aktivieren Sie den Bildlauf:
.scroll-table { width: 100%; overflow-x: scroll; }
Für die Tabelle können wir angeben Breite so, dass sie die Breite des äußeren p überschreitet (so dass Sie den Scrolleffekt sehen können).
.fixed-table { width: 1300px; /* 可由th,td动态扩充,也可指定宽度 */ border-collapse: collapse; }
Das letzte und wichtigste Problem ist die Implementierung fester Spalten. Nach dem Festlegen der absoluten Positionierung wird die Spalte vom ursprünglichen Dokumentfluss getrennt Die Tabelle hat eine Spalte weniger. Daher muss ein Hintergrundfeld hinzugefügt werden, um sicherzustellen, dass in der Tabelle Platz für diese feste Spalte bleibt.
Der HTML-Code sieht ungefähr wie folgt aus: Der Stil einer festen Spalte kann verwendet werden, oder er kann auf den Stil des Hintergrundbereichs festgelegt werden Spalte.
<p class="scroll-table"> <table class="fixed-table"> <thead> <tr> <th>无效背景板</th> <th class="fixed-col">固定列</th> </tr> </thead> <tbody> <tr> <td>无效背景板</td> <td class="fixed-col">固定列</td> </tr> </tbody> </table> </p>
Referenzcode: Ironape
Problem: Die Bestätigungsschaltfläche für den Kalender (nz-range-picker) des Edge-Browsers muss zweimal angeklickt werden
Ursache: Die Lösung ist noch nicht geklärt
:
<nz-range-picker [nzRenderExtraFooter]="renderExtraFooterTpl"> <ng-template #renderExtraFooterTpl> <p> <button nz-button nzType="primary" class="ant-calendar-ok-btn abs-right">确 定</button> </p> </ng-template>
Entsprechendes CSS:
.abs-right { position: absolute; right: 12px; top: 7px; z-index: 1; box-shadow: none; }
Löschen Sie die Standardfußzeile und passen Sie die Fußzeile vollständig an. Zu diesem Zeitpunkt müssen Sie die ursprüngliche Fußzeile löschen. Sie können die Standardfußzeile wie folgt löschen:
::ng-deep .ant-calendar-footer-btn { display: none; }
Zu diesem Zeitpunkt kann die zusätzliche Fußzeile keine absolute Positionierung verwenden.
Problem: Wenn im IE-Browser zwischen mehreren Registerkarten gewechselt wird, sinkt die Höhe des Containers, in dem sich Echart befindet.
Ursache: Das übergeordnete Element kann die Höhe unter dem IE nicht dynamisch anpassen Browser (d. h. über untergeordnete Elemente) Höhe dynamisch ändern und anpassen)
Lösung: Die Höhe des Containers, in dem sich das Echart-Diagramm befindet, wurde korrigiert
Problem: Im IE-Browser, wann Das Formular wird initialisiert, die Formularvalidierung wird ausgelöst
Ursache: Dies ist ein Problem mit IE10+, das das Eingabeereignis implementiert, aber die Auslösezeit ist falsch. Wenn sich beispielsweise der Platzhalter ändert, wird er ausgelöst, wenn der Text des Platzhalters nicht auf Englisch ist. Edge15+ behebt dieses Problem, der IE behebt dieses Problem jedoch möglicherweise nie.
Lösung:
@NgModule({ providers: [{ provide: EVENT_MANAGER_PLUGINS, multi: true, useClass: UniqueInputEventPlugin, deps: [UNIQUE_INPUT_EVENT_PLUGIN_CONFIG], }] }) class MyModule {}
需要注意的是,插件需要自己添加到项目文件中(根据angular团队所说,这个插件修复了一个IE10或者IE11的bug,但是提交了太多的代码,这会给增加现有的应用的打包体积,虽然后面关于这个PR讨论了挺久,但是看样子是准备把这个放到FAQ里面,而不会把他并入框架),并在对应的模块中引用。
另注:IE的输入框会因为placeholder为中文而触发表单验证,placeholder改变了也会触发表单验证,所以,有一个讨巧的方法,placeholder里面的内容写成英文形式(推荐),但这显然不符合中文产品的需求,而且这显然没有国际化。所以可以想办法绕过这一条,使用 HTML实体(已验证,可行),Unicode编码(不可以)
更多编程相关知识,请访问:编程入门!!
Das obige ist der detaillierte Inhalt vonEinführung in Methoden zur Lösung von Browserkompatibilitätsproblemen in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!