angular 브라우저 호환성 문제에 대한 해결 방안

edge 브라우저에서 고정된 열의 테두리가 사라짐
문제:edge 브라우저에서 고정된 열의 테두리가 사라짐
원인: ng-zorro-antd 표 구성 요소는 nzLeft와 nzRight 명령으로 고정된 표 열을 사용합니다. 이 두 명령의 실현 css3의 탭:

position: -webkit-sticky !important;
position: sticky !important;

구글, 화호 및 -webkit-커널의 브라우저는 모두 이 속성(css3)을 지원하고, IE는 이 속성을 지원하지 않기 때문에 IE에서 자동으로 강등되며, 표는 고정열이 없고 미끄러질 수 있는 형식이다.
Edge 브라우저는 1703 이후 버전에서chromium 커널을 사용했는데 css3의 속성에 대한 지원이 비교적 좋고 sticky 속성도 지원합니다. 사용할 수 있고 표 열을 고정할 수 있지만 테두리가 사라집니다.
솔루션:
현재 실행 가능한 솔루션은 다음과 같습니다.

고정열을 사용하지 않습니다. 만약 제품이 고정열을 사용하라는 명확한 요구가 없다면 nzLeft와 nzRight를 사용하여 표를 고정하는 것을 포기할 수 있습니다.따라서 각 브라우저의 디스플레이 효과가 일치합니다.
Edge 브라우저의 성능 저하 처리는 IE 브라우저와 일치하며 고정된 열이 없으며 전체적으로 가로로 스크롤할 수 있습니다

사용자 정의로 고정열을 실현하고 구성 요소의 고정열을 사용하지 않으며position: absolute를 사용합니다.이런 식으로 표의 고정열을 실현하는데..

두 번째 시나리오의 세부 절차는 다음과 같습니다.
div 패키지 테이블을 사용하여 테이블 너비가 div 너비를 초과하면 스크롤을 엽니다.

.scroll-table {
 width: 100%;
 overflow-x: scroll;
}

테이블에 대해 외부 div 폭을 초과하도록 폭을 지정할 수 있습니다. (스크롤 효과를 볼 수 있습니다.)

.fixed-table {
 width: 1300px; /*  th，td ，  */
 border-collapse: collapse;
}

마지막으로 가장 핵심적인 문제는 고정열의 실현이다. 매우 간단하다. 표의 한 열을 절대 포지셔닝으로 설정한다. 절대 포지셔닝을 설정한 후에 이 열은 원래의 문서 흐름에서 벗어나 표가 한 열이 적기 때문에 배경판을 추가해서 표가 이 고정열에 한 위치를 남길 수 있도록 해야 한다.
HTML 코드는 대체적으로 다음과 같다. 이fixed-col는 고정열의 스타일을 설정할 수도 있고 배경판의 스타일을 설정할 수도 있다. 데모에서는 고정열의 스타일을 지정한다.

<div 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>
</div>

참조 코드: Ironape
Edge 브라우저의 달력(nz-range-picker) 확인 단추를 두 번 눌러야 합니다.
질문: Edge 브라우저의 달력(nz-range-picker) 확인 단추를 두 번 눌러야 합니다.
원인: 명확하지 않음
솔루션:
구성 요소 버전을 업그레이드합니다. 현재ng-zorro-antd 8.5 이상의 버전에서는 이 문제를 보지 못했습니다.

사용자 정의 페이지를 만들고 추가 페이지를 추가하여 확정 기능을 대체합니다. 이때 두 가지 방식이 있습니다

대응하는 단추만 덮어씁니다. 예를 들어 확인 단추를 덮어씁니다. 이때 단추의 스타일은 기본 바닥 단추와 일치하지 않습니다. 일치를 유지하기 위해 스타일을 사용자 정의할 수도 있고 기본 바닥 단추의 스타일을 직접 사용할 수도 있습니다. 다음 예에서 구성 요소 라이브러리를 직접 사용하는 스타일을 선택하십시오:ant-calendar-ok-btn, 두 번째 단계는 원래의 단추를 덮어씁니다. 절대 위치로 덮어쓸 수 있습니다

<nz-range-picker [nzRenderExtraFooter]="renderExtraFooterTpl">
<ng-template #renderExtraFooterTpl>
 <div>
 <button nz-button nzType="primary" class="ant-calendar-ok-btn abs-right">   </button>
 </div>
</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 브라우저에서 여러 tab 페이지를 전환합니다. echart가 있는 용기의 높이가 무너졌습니다.
문제: IE 브라우저에서 여러 tab 페이지를 전환합니다. echart가 있는 용기의 높이가 무너졌습니다.
이유: IE 브라우저에서 부모 요소는 동적으로 높이를 조정할 수 없습니다(즉, 하위 요소를 통해 동적으로 높이를 조정합니다).
해결 방안: echart 도표가 있는 용기 높이를 고정합니다
IE 브라우저에서 양식을 초기화할 때 양식 인증 트리거
문제: IE 브라우저에서 양식을 초기화할 때 양식 유효성 검사 트리거
원인: 이것은 IE의 문제입니다. IE10+는 input 이벤트를 실현했지만 촉발 시기는 틀렸습니다.예를 들어placeholder가 바뀔 때,placeholder의 문자는 영어가 아닐 때 촉발됩니다. Edge15+는 이 문제를 복구했지만 IE는 영원히 이 문제를 복구하지 않을 수도 있습니다.
솔루션:

폼의reset()을 사용하여 폼을 리셋하지만, 리셋 작업은 setTimeout에 두거나 다른 수단을 통해 리셋 작업을 폼을 초기화할 때의 마지막 매크로 작업으로 수행해야 합니다.이런 방식의 경험증, 최종 효과는 폼을 초기화한 후 폼 입력 요소의 테두리가 깜박이는 것이다(빨간색)

사용자 정의 서비스 업체 플러그인(권장)을 사용합니다. 이 플러그인은 기존 코드에 대한 파괴성이 적습니다(OCP 원칙에 따름). 이 플러그인은 DerSizes에서 제공합니다.대응하는 모듈에 서비스 업체를 추가하면 됩니다

@NgModule({
 providers: [{
  provide: EVENT_MANAGER_PLUGINS, multi: true,
  useClass: UniqueInputEventPlugin, deps: [UNIQUE_INPUT_EVENT_PLUGIN_CONFIG],
 }] 
})
class MyModule {}

주의해야 할 것은 플러그인은 프로젝트 파일에 스스로 추가해야 한다는 것이다(angular팀의 말에 따르면 이 플러그인은 IE10이나 IE11의 버그를 복구했지만 코드를 너무 많이 제출했기 때문에 기존의 응용 프로그램의 패키지 부피를 증가시킬 수 있다. 비록 뒤에 이 PR에 대해 오랫동안 논의했지만 이것은 FAQ에 넣을 준비를 하고 프레임워크에 넣지 않을 것 같다). 그리고 대응하는 모듈에서 인용해야 한다.
3. IE의 입력 상자는placeholder가 중국어를 위해 폼 검증을 촉발하고placeholder가 바뀌면 폼 검증을 촉발하기 때문에 공교로운 방법이 하나 있다.placeholder 안의 내용을 영문 형식(추천)으로 쓰지만 이것은 중국어 제품의 수요에 부합되지 않고 국제화되지 않았다.그래서 이것을 돌려서 HTML 실체를 사용할 수 있습니다 (검증, 가능), 유니코드 인코딩을 사용할 수 있습니다 (안 됩니다)
총결산
이 글은angular 브라우저 호환성 문제에 대한 해결 방안에 대한 소개입니다. 더 많은 angular 브라우저 호환성 문제에 대한 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!