angular中的瀏覽器相容性問題怎麼解決?下面這篇文章跟大家介紹一下。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。
相關教學推薦:《angular教學》
##問題#:edge瀏覽器下,固定列的邊框消失
原因:ng-zorro-antd表格元件使用nzLeft和nzRight指令固定的表格列,這兩個指令的實作css3中的標籤:
position: -webkit-sticky !important; position: sticky !important;Google、火狐及-webkit-核心的瀏覽器皆支援此屬性(css3),IE不支援此屬性,所以在IE中,會自動降級,表格無固定列,可滑動的形式。
Edge瀏覽器在1703之後的版本使用了chromium內核,對css3的屬性支援較好,也支援sticky屬性,可以使用,可以固定表格列,但邊框會消失。
解決方案:目前可行的解決方案有以下幾種:
這種方式來實現表格的固定列。
.scroll-table { width: 100%; overflow-x: scroll; }針對表格,我們可以指定寬度,讓其超過外層p寬度(這樣可以看到滾動效果)。
.fixed-table { width: 1300px; /* 可由th,td动态扩充,也可指定宽度 */ border-collapse: collapse; }最後一個最核心的問題,就是固定列的實現了,非常簡單,將表格的一列設置成絕對定位,在設置了絕對定位後,該列會脫離原來的文檔流,表格少了一列,所以需要加一個背景板來確保表格能夠為這個固定列留出一個位置。 HTML程式碼大致如下,這個fixed-col可以為固定列的樣式,也可以設定成背景板的樣式,demo中是用其指定了固定列的樣式。
<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)確認按鈕需要點兩次
原因:尚未明確
#解決方案:
<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>
.abs-right { position: absolute; right: 12px; top: 7px; z-index: 1; box-shadow: none; }刪除預設頁腳,完全自訂實作頁尾。此時需要刪除原來的頁腳,可透過:
::ng-deep .ant-calendar-footer-btn { display: none; }這種方式刪除預設頁腳,此時額外的頁腳無法使用絕對定位。
問題:IE瀏覽器下,在多個tab頁面中切換,echart所在容器高度崩潰
原因:IE瀏覽器下父元素無法動態調整高度(即透過子元素動態改變調整高度)
解決方案 #:固定echart圖表所在的容器高度
問題#:IE瀏覽器下,初始化表單時,觸發表單驗證
原因:這個是IE的問題,IE10 實作了input事件,但是觸發的時機卻是錯誤的。例如在placeholder改變時,placeholder的文字不是英語的時候就會觸發,Edge15 修復了這個問題,但是IE可能永遠不會修復這個問題。
解決方案:
@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编码(不可以)
更多编程相关知识,请访问:编程入门!!
以上是解決angular中的瀏覽器相容性問題的方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!