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:

1. Verwenden Sie keine festen Spalten, können Sie auf die Verwendung von nzLeft und nzRight zur Korrektur verzichten der Tisch. Dadurch wird der Anzeigeeffekt in allen Browsern konsistent.

   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.

2. Passen Sie die Implementierung der festen Spalte an, verwenden Sie nicht die Implementierung der festen Spalte der Komponente und implementieren Sie die feste Spalte der Tabelle, indem Sie 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

:

1. Komponentenversion aktualisieren Derzeit tritt dieses Problem in Versionen über ng-zorro-antd 8.5 nicht auf.
2. Passen Sie die Fußzeile an und fügen Sie eine zusätzliche Fußzeile hinzu, um die OK-Funktion zu ersetzen. Es gibt zwei Möglichkeiten, dies zu erreichen:
   Verdecken Sie nur die entsprechende Schaltfläche, z. B. die Schaltfläche „OK“. Zu diesem Zeitpunkt ist der Schaltflächenstil derselbe Die Standardfußzeile Die Schaltflächen sind inkonsistent. Um die Konsistenz aufrechtzuerhalten, können Sie den Stil anpassen oder den Schaltflächenstil direkt in der Standardfußzeile verwenden. Im folgenden Beispiel verwenden Sie direkt den Stil der Komponentenbibliothek: ant-. Calendar-ok-btn. Um die ursprüngliche Schaltfläche abzudecken, können Sie die absolute Positionierung verwenden, um eine Abdeckung zu erreichen:

<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:

1. 使用表单的reset()重置表单，但是重置的操作需要放在setTimeout中，或者通过其他手段将重置的操作作为表单初始化时的最后一个宏任务执行。这种方式经验证，最终的效果是，初始化表单后，表单输入元素的边框闪烁（红色）一下。
2. 使用自定义的服务商插件（较为推荐），这种方式对原有代码的破坏性小（遵循了OCP原则），该插件是由DerSizeS提供的。只需要在对应的module中增加一个服务商即可

@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!