각도에서 브라우저 호환성 문제를 해결하는 방법 소개

angular에서 브라우저 호환성 문제를 해결하는 방법은 무엇입니까? 다음 기사에서는 이를 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

추천 관련 튜토리얼: "angular Tutorial"

Problem: 엣지 브라우저 아래에서 고정 열의 테두리가 사라집니다

Reason: ng-zorro-antd 테이블 구성 요소 nzLeft 및 nzRight 명령어 고정 테이블 열을 사용하고 css3에서 다음 두 명령어 태그를 구현합니다.

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

Google, Firefox 및 -webkit-kernel 브라우저는 모두 이 속성(css3)을 지원하지만 IE는 이 속성을 지원하지 않으므로 IE에서는 자동으로 다운그레이드됩니다. 테이블에는 고정 열이 없으며 슬라이딩 형식입니다.
Edge 브라우저는 1703 이후 버전에서 크롬 커널을 사용합니다. 이 커널은 CSS3 속성에 대한 지원이 더 뛰어나고 고정 속성도 지원합니다. 테이블 열을 고정하고 사용할 수 있지만 테두리가 사라집니다.

해결책:
현재 가능한 해결 방법은 다음과 같습니다.

1. 고정 열을 사용하지 마세요. 제품에서 고정 열 사용을 명시적으로 요구하지 않는 경우 nzLeft 및 nzRight 사용을 중단하여 문제를 해결할 수 있습니다. 테이블. 이렇게 하면 브라우저 전반에 걸쳐 표시 효과가 일관됩니다.

   Edge 브라우저 다운그레이드 처리의 경우 효과는 IE 브라우저와 일치하며 고정된 열이 없으며 전체를 가로로 스크롤할 수 있습니다.

2. 고정 열 구현을 맞춤화하고, 컴포넌트의 고정 열 구현을 사용하지 않고, 이런 식으로 position: absolute;를 사용하여 테이블의 고정 열을 구현합니다.

두 번째 계획의 세부 과정은 다음과 같습니다.

테이블을 감싸기 위해 p를 사용합니다. 테이블의 너비가 p의 너비를 초과하는 경우 스크롤을 활성화합니다.

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

테이블에 대해 다음을 지정할 수 있습니다. 너비가 외부 p의 너비를 초과하도록 합니다(예: 스크롤 효과를 볼 수 있음).

.fixed-table {
  width: 1300px; /* 可由th，td动态扩充，也可指定宽度 */
  border-collapse: collapse;
}

마지막으로 가장 핵심적인 문제는 고정 열 구현입니다. 테이블의 한 열을 절대 위치로 설정하면 해당 열이 원본 문서 흐름에서 분리됩니다. 테이블에는 열이 하나 적어집니다. 따라서 테이블이 이 고정 열을 위한 공간을 남겨 둘 수 있도록 배경 패널을 추가해야 합니다.

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) 확인 버튼을 두 번 클릭해야 합니다.

원인: 해결 방법이 아직 명확하지 않습니다

:

1. 구성 요소 버전 업그레이드 현재 ng-zorro-antd 8.5 이상의 버전에서는 이 문제가 발생하지 않습니다.
2. 바닥글을 사용자 정의하고 추가 바닥글을 추가하여 OK 기능을 대체할 수 있습니다.
   OK 버튼과 같은 해당 버튼만 가리세요. 기본 바닥글과 동일 버튼이 일관성을 유지하기 위해 스타일을 사용자 정의하거나 기본 바닥글에서 버튼 스타일을 직접 사용할 수 있습니다. 다음 예에서는 구성 요소 라이브러리의 스타일을 직접 사용하도록 선택합니다. ant-calendar-ok-btn. 두 번째 단계는 원래 버튼을 가리려면 절대 위치 지정을 사용하여 적용 범위를 달성할 수 있습니다.

<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에서 상위 요소가 동적으로 높이를 조정할 수 없습니다. 브라우저 (즉, 하위 요소를 통해) 동적으로 높이 변경 및 조정)

Solution: echart 차트가 있는 컨테이너의 높이를 수정했습니다.

---

문제: IE 브라우저에서 폼이 초기화되고 폼 유효성 검사가 실행됩니다

Cause: IE10+에서 입력 이벤트를 구현하는데 발생하는 시간이 잘못된 문제입니다. 예를 들어 자리 표시자가 변경되면 자리 표시자의 텍스트가 영어가 아닐 때 트리거됩니다. Edge15+에서는 이 문제를 해결하지만 IE에서는 이 문제를 해결하지 못할 수도 있습니다.

솔루션:

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编码（不可以）

更多编程相关知识，请访问：编程入门！！

위 내용은 각도에서 브라우저 호환성 문제를 해결하는 방법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!