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 속성에 대한 지원이 더 뛰어나고 고정 속성도 지원합니다. 테이블 열을 고정하고 사용할 수 있지만 테두리가 사라집니다.
해결책:
현재 가능한 해결 방법은 다음과 같습니다.
Edge 브라우저 다운그레이드 처리의 경우 효과는 IE 브라우저와 일치하며 고정된 열이 없으며 전체를 가로로 스크롤할 수 있습니다.
position: absolute;
를 사용하여 테이블의 고정 열을 구현합니다.두 번째 계획의 세부 과정은 다음과 같습니다.
테이블을 감싸기 위해 p를 사용합니다. 테이블의 너비가 p의 너비를 초과하는 경우 스크롤을 활성화합니다.
.scroll-table { width: 100%; overflow-x: scroll; }
테이블에 대해 다음을 지정할 수 있습니다. 너비가 외부 p의 너비를 초과하도록 합니다(예: 스크롤 효과를 볼 수 있음).
.fixed-table { width: 1300px; /* 可由th,td动态扩充,也可指定宽度 */ border-collapse: collapse; }
마지막으로 가장 핵심적인 문제는 고정 열 구현입니다. 테이블의 한 열을 절대 위치로 설정하면 해당 열이 원본 문서 흐름에서 분리됩니다. 테이블에는 열이 하나 적어집니다. 따라서 테이블이 이 고정 열을 위한 공간을 남겨 둘 수 있도록 배경 패널을 추가해야 합니다.
HTML 코드는 대략 다음과 같습니다. 이 고정 열은 고정 열의 스타일일 수도 있고, 데모에서는 고정 열의 스타일을 지정하는 데 사용됩니다. 열.
无效背景板 | 固定列 |
---|---|
无效背景板 | 固定列 |
참조 코드: Ironape
문제: Edge 브라우저의 캘린더(nz-range-picker) 확인 버튼을 두 번 클릭해야 합니다.
원인: 해결 방법이 아직 명확하지 않습니다
:
해당 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에서는 이 문제를 해결하지 못할 수도 있습니다.
솔루션:
@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 중국어 웹사이트의 기타 관련 기사를 참조하세요!