bootstrap3은 IE8 브라우저와 호환됩니다! _자바스크립트 기술
- WBOY원래의
- 2016-05-16 15:02:411819검색
최근 저는 뛰어난 프런트엔드 프레임워크인 부트스트랩을 사용하고 있습니다. 이 프레임워크에는 드롭다운 메뉴, 버튼 그룹, 버튼 드롭다운 메뉴, 탐색, 탐색 표시줄, 이동 경로, 페이징, 레이아웃이 포함되어 있습니다. , 썸네일, 경고 대화 상자, 진행률 표시줄, 미디어 개체 등 부트스트랩이 미리 정의되어 있으므로 웹 페이지를 만들 때
내부에서 CSS를 직접 호출하기만 하면 됩니다.부트스트랩은 반응형 레이아웃으로 와이드스크린 컴퓨터, 일반 컴퓨터, 태블릿, 휴대폰에서 뛰어난 레이아웃 경험을 얻을 수 있습니다. 이 반응형 레이아웃은 다양한 해상도에 따라 다양한 스타일을 일치시키는 CSS3의 미디어 쿼리 기능을 통해 구현됩니다. IE8 브라우저는 이 우수한 CSS3 기능을 지원하지 않습니다. Bootstrap은 IE8과 호환되도록 사용하는 방법을 개발 문서에 작성했습니다. IE6 및 IE7과 호환되도록 하려면 bsie(bootstrap2)
를 검색하세요.IE8의 부트스트랩은 확실히 Chrome, Firefox, IE11만큼 완벽하지는 않습니다. 일부 구성 요소는 완전한 호환성을 보장하지 않으며 여전히 해킹이 필요합니다
1. html5 선언을 사용하세요
<!DOCTYPE html> 这里不可以有空格 <html>
참고: bfa5b95cc6c7156c2effd9d1777232d8
2. 메타태그 추가
이 페이지의 IE 버전 표시를 확인하세요
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" /> <meta http-equiv="X-UA-Compatible" content="IE=9" />
3. 부트스트랩 파일 가져오기
4. html5shiv.min.js와 response.min.js를 소개하세요
html5를 (완전히) 지원하지 않는 브라우저는 html5 태그를 "지원"하도록 하세요
<!--[if lt IE 9]> <script src="js/bootstrap/html5shiv.min.js"></script> <script src="js/bootstrap/respond.min.js"></script> <![endif]-->
5. 버전 1.X Jquery 라이브러리 추가
6. IE8에서 테스트할 때 자리 표시자가 지원되지 않는 문제가 발견되었습니다. 다음은 IE에서 자리 표시자를 지원하는 문제를 해결하는 방법입니다. 이 문서에서 인용된 jquery는 1.12.0이며 첫 번째 인용문 jquery
<script type="text/javascript" src="js/bootstrap/jquery-1.12.0.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script>
[코드]eff061320b548ac728fbba7adfa7717b2cacc6d41bbb37262a98f745aa00fbf0
그런 다음 파일에 코드를 추가하세요
<script type="text/javascript">
$(function () {
$('input, textarea').placeholder();
});
</script>
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" /> <meta name="author" content="zhy" /> <title>ie8</title> <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css"> <!--[if lte IE 9]> <script src=js/bootstrap/respond.min.js"></script> <script src=js/bootstrap/html5shiv.min.js"></script> <![endif]--> <script src="js/bootstrap/jquery-1.12.0.min.js"></script> <script src="js/bootstrap/bootstrap.min.js"></script> </head> <body> </body> </html>
1. IE에서 IE 버전을 확인하는 명령문
<!--[if lte IE 6]> <![endif]--> IE6及其以下版本可见 <!--[if lte IE 7]> <![endif]--> IE7及其以下版本可见 <!--[if IE 6]> <![endif]--> 只有IE6版本可见 <![if !IE]> <![endif]> 除了IE以外的版本 <!--[if lt IE 8]> <![endif]--> IE8以下的版本可见 <!--[if gte IE 7]> <![endif]-->
lte: Less than orequal to의 약자로 작거나 같다는 뜻입니다.
lt: Less than의 약자로 보다 작다는 뜻입니다.
gte: Greater than orequal to의 약자로 크거나 같다는 뜻입니다.
gt: Greater than의 약어로, ~보다 크다는 뜻입니다.
!: 같지 않음을 의미하며, 이는 자바스크립트의 부등판단 기호와 동일합니다