브라우저 호환성 문제 분석 예시
- 零下一度원래의
- 2017-06-30 11:08:011901검색
호환성 문제는 프런트엔드에서 중요한 부분입니다.
국내 브라우저 중에는 360브라우저, QQ브라우저 등 듀얼코어 브라우저가 대부분입니다. 듀얼 코어 브라우저에는 IE 호환 코어와 비IE 속도 코어라는 두 개의 코어가 있으며, 이는 각각 호환 모드와 속도 모드에 해당합니다. 호환 모드는 IE 커널을 사용하고, 초고속 모드는 웹킷 커널을 사용합니다. 현재 대부분의 웹사이트는 성능과 사용자 경험을 위해 기본적으로 극한 속도 모드를 사용합니다. 초고속 모드에서 문제가 발생할 경우 호환 모드를 사용하세요.
익스트림 스피드 모드는 웹킷 커널을 사용하지만 브라우저의 성능은 여전히 다소 다릅니다. 저는 주로 크롬을 이용해 디버깅을 하는데, 익스트림 스피드 모드에서 비정상적으로 동작합니다.
좋아요, 본론으로 들어가겠습니다. Flex는 현재 프런트엔드 레이아웃에서 매우 좋은 속성입니다. 여기서는 많이 말하지 않겠습니다. 마스터의 소개를 읽어보세요
그리고 직장에서 Flex를 상대 위치 지정과 함께 사용할 때 문제가 발견되었습니다.
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
<title>Test</title><style>html,body{margin:0;padding:0;width: 100%;height: 100%;}
.wrapper{position: relative;width: 100%;height: 100%;background-color: #fff;display: flex;flex-direction: column;}
.flex-1{flex: 0 0 200px;background-color: #dfdfdf;}.flex-2{flex: 1;}.circle{position: relative;
left: 50%;top: 50%;margin: -100px 0 0 -100px;width: 200px;height: 200px;border-radius: 100px;background-color: #52caff;}</style></head><body><div class="wrapper"><div class="flex-1"></div><div class="flex-2"><div class="circle"></div></div></div></body></html>
하지만 360 속도에서는 다음과 같았습니다.
원이 수직인 이유를 찾았습니다. 방향의 상대 위치 지정이 적용되지 않습니다. 즉, "top:50%"가 작동하지 않습니다.
왜 작동하지 않는 것 같나요? div.flex-1은 "flex:0 0 500px" 높이를 명시적으로 쓰지 않습니다. 이는 flex 속성의 약어인
쓰기 방법을 변경하여 수행할 수 있습니다.
은 실제로는 다음과 같습니다. div의 높이를 설정합니다. 이때 상황이 매우 불확실할 때 어떻게 해야 할지 고민하고 있습니다.
css3 calc()를 사용하시나요? 이 경우 flex 하위 영역이 상대적으로 위치하게 되면 flex 를 사용할 필요가 없습니다. 발생한 문제는 해결되었지만 새로운 문제가 발생한 것 같습니다.
국내 브라우저는 왜 호환 모드에서 다르게 동작하나요? . . . . . . . . . . . .
위 내용은 브라우저 호환성 문제 분석 예시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!