유사점이 있다면 영광입니다. 재인쇄되면 알려주세요
IE6, IE7, IE8, IE9, IE10, IE11 부트스트랩 지원 방법
최근에 웹사이트를 만들었는데, 부트스트랩이 매우 좋다고 항상 느꼈습니다. 이번에는 bootstrap3, Chrome, Firefox, Safari, Opera, 360 브라우저(속도 모드)를 사용했고, Sogou 브라우저 등 다른 브라우저들은 문제 없었습니다. IE8과 IE11에서는 스타일을 표시할 수 없었습니다. 그 후 여러 Baidu를 사용했고, 결국 네티즌 Yapeng.com 게시물의 도움으로 문제를 해결했습니다. Qianxun Learning Network도 참고하세요. 해답은 다음과 같이 요약됩니다:
먼저, HTML 페이지가 DOCTYPE 선언으로 시작하는지 확인하세요. DOCTYPE은 브라우저에 HTML 문서를 파싱할 때 어떤 HTML 또는 XHTML 명세를 사용해야 하는지 알려주며, 이는 다음과 같은 요소에 영향을 미칩니다:
태그, 속성 및 속성에 대한 제약
브라우저의 렌더링 모드에 영향을 미치며, 다양한 렌더링 모드는 브라우저가 CSS 코드와 심지어 Javascrip{filter}t 스크립트를 파싱하는 데 영향을 줍니다
DOCTYPE이 매우 중요하며, 현재 모범 사례는 HTML 문서의 첫 줄에 다음과 같이 입력하는 것입니다:
<!DOCTYPE html>
부트스트랩을 찾은 이유는 여러 가지가 있습니다. 신의 글에 요약된 것처럼, 우선 부트스트랩3는 모바일 기기 우선 원칙에 따라 개발되었기 때문에 이유는 다음과 같습니다:
1. 원격 주소가 올바르게 호출되지 않음
즉, IE9 이하라면 두 개의 특수 js를 호출하세요
<!-- HTML5 Shim과 Respond.js IE8 지원, HTML5 요소 및 미디어 쿼리 -->
<!--[만약 예 9]>
<scrip{filter}t src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></scrip{filter}t>
<scrip{filter}t src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></scrip{filter}t>
<![끝]-->
하지만 테스트해보니 위 js 파일만 사용하는 것은 현실적으로 불가능하다는 것을 알게 되었습니다.
2. 호출 방식이 잘못됨
respond.min.js, respond.js, CSS 파일을 file:// 또는 @import 형태로 참조하지 마세요
3. 브라우저의 콘텐츠 식별 (메타 태그를 사용하여 브라우저의 렌더링 방식을 조정함)
부트스트랩은 IE 호환성 모드를 지원하지 않으며, IE가 최신 렌더링 모드를 실행하려면 다음 태그들이 페이지에 추가됩니다
IE=edge는 최신 IE 커널이 강제로 적용되었음을 의미하며, chrome=1은 IE6/7/8 및 기타 버전용 브라우저 플러그인 Google Chrome Frame이 설치되어 있을 경우(이로 인해 사용자의 브라우저가 여전히 IE의 메뉴와 인터페이스처럼 보일 수 있지만, 실제로 웹 탐색 시 Chrome 커널을 사용하고 있음), 이 경우 Chrome 커널이 렌더링에 사용됩니다. 이 메타 태그에 대한 구체적인 설명은 StackOverflow의 훌륭한 답변을 참고하시고, <meta>태그 전문가의 영어 설명은 여기에서 확인할 수 있습니다
http://stackoverflow.com/questions/6771258/whats-the-difference-if-meta-http-equiv-x-ua-compatible-content-ie-edge-e
나는 덧붙였다
<meta http-equiv="X-UA-Compatible" content="IE=9" />
그리고 그게 바로 그 순간입니다
커널은 메타 태그를 제어하는데, 중국의 현재 주류 브라우저들은 이중 커널이기 때문에, 메타 태그는 브라우저에 페이지를 렌더링할 때 어떤 커널을 사용할지 알려주기 위해 추가됩니다
4. IE8은 컨테이너의 여러 속성을 지원하지 않습니다
IE8은 박스 크기를 완전히 지원하지 않습니다: border-box는 최소 너비, 최대 너비, 최소 높이, 최대 높이 중 하나로 사용됩니다. 따라서 부트스트랩 v3.0.1의 컨테이너 클래스는 더 이상 최대 폭을 사용하지 않습니다.
CSS가 도입되는 순서5.JS 문제
js를 인용하기 전에 반드시 CSS를 인용해야 합니다
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" media="screen"/>
<scrip{filter}t type="text/javascrip{filter}t" src="js/respond.min.js"></scrip{filter}t>
6. DOCTYPE은 앞뒤로 빈칸 줄을 가지고 있습니다
<!DOCTYPE html>
여기에 공백이 있는 것은 옳지 않으며, 공백을 제거해야 합니다
<html>
7. bootstrap.css 수동 수정도 가능합니다
부트스트랩 2.1.1을 사용 중이라면 navbar-inner{ filter:none}을 수정하면 문제를 해결할 수 있습니다. 버전 3.0+를 사용 중이라면 코드가 없으니 자세한 내용은 연결 상태를 참고해 주세요
http://stackoverflow.com/questions/12460190/bootstrap-navbar-does-not-show-in-ie8
8. 개성 모드 사용
웹 페이지를 정의할 때, 구형 브라우저와 하위 호환되는 모드는 퀴크 모드이며, 이에 대응하는 "표준 모드"는 표준 모드입니다. 구체적으로, <!DOCTYPE html>는 이전과 동일하게 작성되었습니다
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
이 방법을 테스트해봤지만, 현실적으로 불가능합니다
마지막으로 IE11에서 테스트했지만 IE8에서 테스트했는데 플레이스홀더가 지원되지 않는 문제가 있음을 발견했습니다
IE가 플레이스홀더를 지원하는 문제를 해결하는 방법은 다음과 같습니다
이 글에서 언급한 jquery는 1.11.1에서 테스트되었으며, jquery가 먼저 참조됩니다
<scrip{filter}t type="text/javascrip{filter}t" src="http://code.jquery.com/jquery-1.11.1.min.js"></scrip{filter}t>
다른 jquery 버전도 사용할 수 있습니다
그다음 <scrip{filter}t type="text/javascrip{filter}t" src="js/jquery.placeholder.js"></scrip{filter}t를 도입합니다>
이 파일의 다운로드 주소jquery.placeholder.js https://github.com/mathiasbynens/jquery-placeholder
그 다음 파일에 코드를 추가하세요
<scrip{filter}t type="text/javascrip{filter}t">
$(함수 () {
플러그인을 호출하세요
$('입력, 텍스트 영역').placeholder();
});
</scrip{filter}t>
제가 관련되어 있거나 문제가 아직 해결되지 않았다면 더 자세한 http://hustlzp.com/post/2014/01/ie8-compatibility 알려주세요
위의 IE6, 7, 8, 9, 10, 11, 크롬, 파이어폭스, 사파리, 오페라, 360 브라우저(속도 모드), 소고우 브라우저 테스트는 통과했지만, IE5.5만 가능해 보입니다. 요컨대, 문제는 여기서 해결되었습니다. 모든 악마 IE6 - 간장이라고 부르세요
jquery.placeholder.js 사용을 원하지 않는다면, 브라우저에서 플레이스홀더 에뮬레이션 구현을 더 이상 지원할 수 없습니다
자세한 내용은 이 기사를 참고하시면 됩니다 http://ju.outofmemory.cn/entry/1595 |
게시됨 2016. 8. 3. 오후 10:55:23
|
|
|
집주인