ホームページ > 記事 > ウェブフロントエンド > Angular でブラウザの互換性の問題を解決する方法の紹介
angular におけるブラウザの互換性の問題を解決するにはどうすればよいですか?次の記事で紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。
関連チュートリアルの推奨事項: 「angular チュートリアル」
質問: エッジブラウザの下で、固定列の境界線が消えます
原因: ng-zorro-antd テーブル コンポーネントは、nzLeft および nzRight 命令を使用してテーブル列を固定しますこれら 2 つの手順 css3 にタグを実装します:
position: -webkit-sticky !important; position: sticky !important;
Google、Firefox、および -webkit-kernel ブラウザはすべて、この属性 (css3) をサポートしています。IE はこの属性をサポートしていないため、IE では自動的にダウングレードされ、テーブルは空になります。固定列、スライド可能なフォーム。
Edge ブラウザは 1703 以降のバージョンで chromium カーネルを使用しており、CSS3 属性のサポートが強化され、sticky 属性もサポートされています。テーブル列を使用して固定することはできますが、境界線は表示されなくなります。
解決策:
現在実現可能な解決策は次のとおりです:
Edge ブラウザのダウングレード処理の場合、効果は IE ブラウザと同じで、固定列はなく、全体を水平にスクロールできます。
position:Absolute;
を使用してテーブルの固定列を実装します。 2 番目のプランの詳細なプロセスは次のとおりです:
Use p を使用してテーブルをラップします。テーブルの幅が p の幅を超える場合、スクロールを有効にします:
.scroll-table { width: 100%; overflow-x: scroll; }
テーブルの場合、外側の p 幅を超える幅を指定できます (スクロール効果が確認できるようになります)。
.fixed-table { width: 1300px; /* 可由th,td动态扩充,也可指定宽度 */ border-collapse: collapse; }
最後で最も重要な問題は、固定列の実装です。それは非常に簡単です。テーブルの列を絶対位置に設定します。絶対位置を設定した後、列は元のドキュメントから分離されます。テーブル 欠落している列が 1 つあるため、テーブルにこの固定列の場所を確保できるように背景パネルを追加する必要があります。
HTML コードは大まかに次のとおりです。この固定列は、固定列のスタイルにすることも、背景パネルのスタイルに設定することもできます。デモでは、これを使用して、固定列のスタイル。
<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>
参照コード: Ironape
問題: Edge ブラウザーのカレンダー (nz-range-picker) 確認ボタンを2 回クリックしました
原因: まだ明確ではありません
解決策:
<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>
対応する CSS:
.abs-right { position: absolute; right: 12px; top: 7px; z-index: 1; box-shadow: none; }
デフォルトのフッターを削除します。完全にカスタマイズ可能なフッター。このとき、元のフッターを削除する必要があります。
::ng-deep .ant-calendar-footer-btn { display: none; }
を使用してデフォルトのフッターを削除できます。現時点では、追加のフッターでは絶対配置を使用できません。
問題: IEブラウザで複数のタブページを切り替えると、echartが配置されているコンテナの高さが崩れます
原因: 親要素の高さはIEブラウザでは動的に調整できません(つまり、高さは子要素を通じて動的に変更されます)
##解決策: echartチャートが配置されているコンテナの高さを修正しました
## 問題 #: IEブラウザでは、フォームが初期化されると、フォーム検証がトリガーされます
原因 : これは IE の問題です。IE10 は入力イベントを実装しますが、トリガー時間が間違っています。たとえば、プレースホルダーが変更されると、プレースホルダーのテキストが英語でない場合にトリガーされます。Edge15 ではこの問題が修正されましたが、IE ではこの問題が修正されない可能性があります。 ############解決######:### 另注:IE的输入框会因为placeholder为中文而触发表单验证,placeholder改变了也会触发表单验证,所以,有一个讨巧的方法,placeholder里面的内容写成英文形式(推荐),但这显然不符合中文产品的需求,而且这显然没有国际化。所以可以想办法绕过这一条,使用 HTML实体(已验证,可行),Unicode编码(不可以) 更多编程相关知识,请访问:编程入门!!
@NgModule({
providers: [{
provide: EVENT_MANAGER_PLUGINS, multi: true,
useClass: UniqueInputEventPlugin, deps: [UNIQUE_INPUT_EVENT_PLUGIN_CONFIG],
}]
})
class MyModule {}
需要注意的是,插件需要自己添加到项目文件中(根据angular团队所说,这个插件修复了一个IE10或者IE11的bug,但是提交了太多的代码,这会给增加现有的应用的打包体积,虽然后面关于这个PR讨论了挺久,但是看样子是准备把这个放到FAQ里面,而不会把他并入框架),并在对应的模块中引用。
以上がAngular でブラウザの互換性の問題を解決する方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。