부트스트랩이 IE를 지원하지 않으면 어떻게 해야 합니까?
- 藏色散人원래의
- 2021-02-05 09:12:302709검색
부트스트랩이 IE를 지원하지 않는 문제에 대한 해결책: 먼저 HTML 페이지 시작 부분에 DOCTYPE 문이 있는지 확인한 다음 원격 주소를 올바르게 호출하고 마지막으로 해당 내용을 확인하고 수정합니다. js 또는 css 파일.
이 문서의 운영 환경: Windows 7 시스템, bootstrap3, Dell G3 컴퓨터.
bootstrap은 IE9 이하의 브라우저와 특정 호환성 문제가 있습니다. 이 호환성 문제를 해결하려면 관련 js 파일을 도입하고 이에 따라 처리해야 합니다. 다음 글에서는 부트스트랩이 IE를 지원하지 않는 문제에 대한 해결책을 소개하겠습니다. 도움이 되셨으면 좋겠습니다.
먼저 HTML 페이지 시작 부분에 DOCTYPE 선언이 있는지 확인해야 합니다. DOCTYPE은 어떤 종류의 HTML 또는 DOCTYPE이 CSS 코드 및 JavaScript 스크립트 구문 분석에 매우 중요한지 알려줍니다. 현재 가장 좋은 방법은 HTML 문서의 첫 번째 줄에 입력하는 것입니다.
<!DOCTYPE html>
마스터의 게시물은 몇 가지 이유를 요약했습니다. 우선 Bootstrap3은 모바일 기기를 먼저 원칙으로 개발되었기 때문에 그 이유는 다음과 같습니다.
1.원격 주소가 올바르게 호출되지 않습니다
즉, IE9 이하에서는 두 개의 특수 js가 호출됩니다
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]-->
하지만 테스트 결과 위의 js 파일을 사용하는 것만으로는 작동하지 않는 것으로 나타났습니다.
권장: "
bootstrap tutorial"
2 호출 방법이 잘못되었습니다
response.min.js, response.js 또는 css 파일을 참조하기 위해 file:// 또는 @import 형식을 사용하지 마세요3. 브라우저의 내용이 표시됩니다(브라우저의 렌더링 모드를 조정하려면 메타 태그를 사용하세요).
bootstrap은 IE 호환 모드를 지원하지 않습니다. IE 브라우저가 최신 렌더링 모드를 실행할 수 있도록 다음 태그가 페이지에 추가됩니다.
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
IE=edge IE의 최신 커널이 강제로 지원된다는 의미입니다. chrome=1은 IE6/7/8 및 기타 버전용 브라우저 플러그인 Google Chrome Frame이 설치된 경우(사용자의 브라우저에 IE의 메뉴와 인터페이스가 계속 유지되지만 사용자가 웹을 탐색할 수 있음을 의미) Chrome 브라우저 커널이 실제로 사용되는 경우) Chrome 커널이 렌더링에 사용됩니다. 이 메타 태그에 대한 구체적인 지침은 StackOverflow의 훌륭한 답변을 참조하세요. e8e496c15ba93d81f6ea4fe5f55a2244 태그 전문가의 영어 설명은
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은 지원하지 않습니다. box-sizing:border-를 완전히 지원하지 않습니다. Box는 min-width, max-width, min-height 또는 max-height와 함께 사용됩니다. 따라서 max-width는 부트스트랩 v3.0.1의 컨테이너 클래스에 더 이상 사용되지 않습니다.
5. JS 및 CSS 도입 순서로 인한 문제
js
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" media="screen"/> <script type="text/javascript" src="js/respond.min.js"></script>
6를 참조하기 전에 먼저 CSS를 인용해야 합니다. DOCTYPE
<!DOCTYPE html> 这里有空格也不行，要去掉空格
7 앞뒤에 빈 줄이 있습니다.
사용하는 경우 bootstrap2.1.1입니다. navbar-inner{ filter:none}을 수정하면 문제가 해결됩니다. 버전 3.0 이상을 사용하는 경우 이 코드는 더 이상 사용할 수 없습니다. 자세한 내용은 링크
http://stackoverflow.com/questions/12460190/bootstrap-navbar-does-not-show-in-ie8
를 참조하세요. 8. 쿼크 모드(호환 모드)를 사용하세요 )
웹 페이지를 정의할 때 이전 브라우저와 호환되는 모드가 쿼크 모드이고, 해당 "표준 모드"가 표준 모드입니다. 구체적으로는 이전에 8b05045a5be5764f313ed5b9168a17e6을 작성해주세요
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
이런걸 테스트해봤는데 불가능하네요
드디어 IE11에서 테스트를 통과했는데, IE8에서 테스트를 해보니 아래와 같은 문제점이 발견되었습니다. placeholder가 지원되지 않습니다
다음은 IE에서 placeholder를 지원하는 문제를 해결하는 방법입니다
본 글에 인용된 jquery는 1.11.1이고 테스트를 통과했습니다. 첫 번째 인용 jquery
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
다른 jquery 버전을 사용해도 됩니다
그런 다음 소개
<script type="text/javascript" src="js/jquery.placeholder.js"></script>
jquery.placeholder.js 파일을 다운로드하세요. 주소는 https://github.com/mathiasbynens/jquery-placeholder
그런 다음 파일에 일부 코드를 추가하세요
<script type="text/javascript">
$(function () {
// Invoke the plugin
$('input, textarea').placeholder();
});
</script>제가 여기에 참여했거나 문제가 아직 해결되지 않은 경우 http://hustlzp.com/post/2014/01/ie8-compatibility로 이동하여 더 자세한 내용을 확인하세요
위 내용은 부트스트랩이 IE를 지원하지 않으면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!