Twitter Bootstrap 3의 IE8 문제
새로운 Twitter Bootstrap을 사용하여 사이트를 만들고 있습니다. 사이트는 잘 보이고 IE8을 제외한 모든 필수 브라우저에서 작동합니다.
IE8에서는 모바일 버전의 요소를 표시하는 것으로 보이지만 데스크탑의 전체 화면에 걸쳐 있습니다. 내가 겪고있는 문제는 트위터 부트 스트랩이 모바일이라는 것입니다. 어떤 이유로 IE8 이이 옵션을 사용하고 있습니다.
또한 container클래스가 의도 한대로 최대 너비 CSS 속성을 가져 오는 것처럼 보이지 않습니다. 내가 잘못한 것을 누구나 볼 수 있습니까?
<!-- Favicon -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<!-- Bootstrap -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<script src="/SiteFiles/js/modernizr.js"></script>
<!-- CSS -->
<link href="/SiteFiles/css/main.css" rel="stylesheet">
<header>
<div class="topArea clearfix">
<div class="container">
<div class="topLinks">
<div class="btn-group">
<span class="flag" data-toggle="dropdown"> </span>
<ul class="dropdown-menu">
<li><a href="#">Country 1</a></li>
<li><a href="#">Country 2</a></li>
<li><a href="#">Country 3</a></li>
<li class="divider"></li>
<li><a href="#">Country 4</a></li>
<li><a href="#">Country 5</a></li>
<li><a href="#">Country 6</a></li>
</ul>
</div>
<div class="visible-sm btn-group">
<div class="plus" data-toggle="dropdown"><i class="icon-plus icon-2x"> </i></div>
<ul class="dropdown-menu">
<li><a href="#">Parts & Service</a></li>
<li><a href="#">Store Locator</a></li>
<li><a href="#">Find a Service Centre</a></li>
<li><a href="#">Parts List</a></li>
<li><a href="#">Tool Vibration</a></li>
<li><a href="#">Resource Centre</a></li>
<li><a href="#">Media Centre</a></li>
<li><a href="#">Register your Tools</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">
<button type="button" class="btn btn-default">Where to Buy</button></a></li>
</ul>
</div>
<div class="topNav">
<ul class="hidden-sm">
<li>
<div class="btn-group">
<a href="#" data-toggle="dropdown">Parts & Service</a>
<ul class="dropdown-menu">
<li><a href="#">Store Locator</a></li>
<li><a href="#">Find a Service Centre</a></li>
<li><a href="#">Parts List</a></li>
<li><a href="#">Tool Vibration</a></li>
</ul>
</div>
</li>
<li><a href="#">Resource Centre</a></li>
<li><a href="#">Media Centre</a></li>
<li><a href="#">Register your Tools</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">
<button type="button" class="btn btn-default">Where to Buy</button></a></li>
</ul>
</div>
<div class="searchArea">
<input type="text" />
<a href="#" class="goBtn">GO</a>
</div>
</div>
</div>
</div>
<div class="mainNavArea">
<div class="container rel">
<div class="logo">
<img src="/SiteFiles/img/logo.png" title="Milwaukee - Nothing but heavy duty" alt="Milwaukee - Nothing but heavy duty" />
</div>
<div class="navi">
<div class="navbar">
<div class="container">
<!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Place everything within .navbar-collapse to hide it until above 768px -->
<div class="nav-collapse collapse navbar-responsive-collapse">
<ul class="nav nav-justified">
<li><span class="dropArrow"> </span><span class="topNavPosition">Power Tools</span>
<div class="navDrop">
<div class="navDropInner">
<div class="row">
<div class="hidden-sm col-sm-4 col-lg-4">
<img src="/SiteFiles/img/drill.jpg" alt="" />
</div>
<div class="col-12 col-sm-8 col-lg-8">
<h2>Power Tools</h2>
<div class="row">
<div class="col-6 col-sm-6 col-lg-6">
<a href="#">Cutters</a>
<a href="#">Levels</a>
<a href="#">Pliers</a>
<a href="#">Saws</a>
<a href="#">Screwdrivers</a>
</div>
<div class="col-6 col-sm-6 col-lg-6">
<a href="#">Snips</a>
<a href="#">Utility Knives</a>
<a href="#">Combo Knives</a>
<a href="#">Hand Tool Accessories</a>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="closeNav">X</a>
</div>
</li>
<li><span class="dropArrow"> </span><span class="topNavPosition">Hand Tools</span>
<div class="navDrop">
<div class="navDropInner">
<div class="row">
<div class="hidden-sm col-sm-4 col-lg-4">
<img src="/SiteFiles/img/drill.jpg" alt="" />
</div>
<div class="col-12 col-sm-8 col-lg-8">
<h2>Hand Tools</h2>
<div class="row">
<div class="col-6 col-sm-6 col-lg-6">
<a href="#">Cutters</a>
<a href="#">Levels</a>
<a href="#">Pliers</a>
<a href="#">Saws</a>
<a href="#">Screwdrivers</a>
</div>
<div class="col-6 col-sm-6 col-lg-6">
<a href="#">Snips</a>
<a href="#">Utility Knives</a>
<a href="#">Combo Knives</a>
<a href="#">Hand Tool Accessories</a>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="closeNav">X</a>
</div>
</li>
<li><span class="dropArrow"> </span><span class="topNavPosition">Test & Measurement</span>
<div class="navDrop">
<div class="navDropInner">
<div class="row">
<div class="hidden-sm col-sm-4 col-lg-4">
<img src="/SiteFiles/img/drill.jpg" alt="" />
</div>
<div class="col-12 col-sm-8 col-lg-8">
<h2>Test & Measurement</h2>
<div class="row">
<div class="col-6 col-sm-6 col-lg-6">
<a href="#">Cutters</a>
<a href="#">Levels</a>
<a href="#">Pliers</a>
<a href="#">Saws</a>
<a href="#">Screwdrivers</a>
</div>
<div class="col-6 col-sm-6 col-lg-6">
<a href="#">Snips</a>
<a href="#">Utility Knives</a>
<a href="#">Combo Knives</a>
<a href="#">Hand Tool Accessories</a>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="closeNav">X</a>
</div>
</li>
<li><span class="dropArrow"> </span><span class="topNavPosition">Accessories</span>
<div class="navDrop">
<div class="navDropInner">
<div class="row">
<div class="hidden-sm col-sm-4 col-lg-4">
<img src="/SiteFiles/img/drill.jpg" alt="" />
</div>
<div class="col-12 col-sm-8 col-lg-8">
<h2>Accessories</h2>
<div class="row">
<div class="col-6 col-sm-6 col-lg-6">
<a href="#">Cutters</a>
<a href="#">Levels</a>
<a href="#">Pliers</a>
<a href="#">Saws</a>
<a href="#">Screwdrivers</a>
</div>
<div class="col-6 col-sm-6 col-lg-6">
<a href="#">Snips</a>
<a href="#">Utility Knives</a>
<a href="#">Combo Knives</a>
<a href="#">Hand Tool Accessories</a>
</div>
</div>
</div>
</div>
</div>
<a href="#" class="closeNav">X</a>
</div>
</li>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
<!-- /.container -->
</div>
<!-- /.navbar -->
</div>
</div>
</div>
</header>
CDN (bootstrapcdn.com)에서 CSS를 가져 왔습니다. respond.js는 로컬 파일에서만 작동합니다. 따라서 bootstrap.css의 로컬 사본을 사용하여 IE8에서 웹 사이트를 사용해보십시오. 또는 읽으십시오 : CDN / X-Domain Setup
참고 :
https://github.com/scottjehl/Respond/pull/206
최신 정보:
읽어보십시오 : http://getbootstrap.com/getting-started/#support
또한 Internet Explorer 8에서는 미디어 쿼리 지원을 활성화하기 위해 respond.js를 사용해야합니다.
참조 : https://github.com/scottjehl/Respond
이러한 이유로 기본 템플릿에는 헤드 섹션에 다음 줄이 포함됩니다.
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
또한 다음 META 태그를 설정해야했습니다.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Bootstrap 2에서 3으로 전환 할 때도 동일한 문제가 발생했습니다. 벌써 respond.js와 html5shiv.js를 얻었고 메타를 edge로 설정했습니다. navbar 요소 유형이 2에서 3으로 바뀌 었다는 것을 놓쳤습니다. Bootstrap 2에서는 탐색이었습니다. Bootstrap 3에서는 이제 헤더입니다. 그래서 내가해야했던 문제를 완전히 해결하려면
<meta http-equiv="X-UA-Compatible" content="IE=edge">
CSS를로드 한 직후 이것을 넣으십시오.
<!--[if lt IE 9]>
<script src="~/Content/compatibility/html5shiv.js"></script>
<script src="~/Content/compatibility/respond.min.js"></script>
<![endif]-->
그런 다음 변경
<nav class="navbar" role="navigation">
</nav>
에
<header class="navbar" role="navigation">
</header>
아 그리고 좋은 측정을 위해 나는 또한 추가했다
<meta name="viewport" content="width=device-width, initial-scale=1.0">
그것이 바로 Bootstrap 사이트 자체에있는 것이기 때문입니다.
필자의 경우 부트 스트랩 축소 CSS로 문제가 발생했습니다. IE8에서 부트 스트랩 3.0.2를 반응 형 (F12 개발자 도구를 사용하여 에뮬레이트)으로 만들려면 다음을 수행해야했습니다.
1-X-UA-Compatible 플래그를 설정하십시오.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
2-bootstrap.min.css 대신 축소되지 않은 bootstrap.css를 사용하십시오.
<link href="/css/bootstrap.css" rel="stylesheet" />
3-respond.js (및 html5shiv.js) 추가
<!--[if lt IE 9]>
<script src="/js/html5shiv.min.js"></script>
<script src="/js/respond.min.js"></script>
<![endif]-->
넣어 respond.js페이지의 맨 아래에 있지만 닫기 전에 body태그를 여기의 링크가 respond.js하고 로컬 호스트에서이 코드를 실행합니다.
https://github.com/scottjehl/Respond
만일을 위해서. CSS 파일을로드 한 후 IE 특정 js 파일을로드하십시오.
CSS 링크는 <head>as 링크 respond.js만 포함하는 것을 잊지 마십시오 .
앞에서 언급했듯이 1) IE8은 미디어 쿼리를 지원하지 않습니다. 2) 도메인 간 CSS 파일과 함께 사용되는 respond.js는 앞에서 설명한대로 포함되어야합니다.
BootstrapCDN을 사용하려면 다음 예를 참조하십시오.
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!--[if lt IE 9]>
<link href="//netdna.bootstrapcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
<link href="img/ie/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
<script src="js/ie/html5shiv.js"></script>
<script src="js/ie/respond.min.js"></script>
<script src="js/ie/respond.proxy.js"></script>
<![endif]-->
또한 로컬 디렉토리에 respond.proxy.gif, respond.min.js 및 response.proxy.js를 복사해야합니다.
확인 후 :
- DOCTYPE
- X-UA 호환 메타 태그
- html5shiv.js 및 respond.js 포함 (및 최신 버전 다운로드)
- respond.js가 로컬 임
- File : //이 아닌 웹 서버에서 호스팅 사이트
- @import를 사용하지 않음
- ...
여전히 col-lg, col-md 및 col-sm이 작동하지 않았습니다. 마지막으로 부트 스트랩에 대한 참조를 html5shiv.js 및 respond.js에 대한 참조 이전으로 이동했으며 모두 작동했습니다.
다음은 스 니펫입니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Bootstrap Test for IE8</title>
<!-- Moved these two lines up -->
<link href="includes/css/bootstrap.css" type="text/css" rel="stylesheet" />
<script src="includes/js/bootstrap.js"></script>
<!--[if lt IE 9]>
<script src="includes/js/html5shiv.js"></script>
<script src="includes/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4" style="background-color:red;">col-md-4</div>
<div class="col-md-8" style="background-color:green;">col-md-8</div>
</div>
</div>
</body>
</html>
설명에서 IE8이 표준 버전이며 content="IE=edge"페이지를 최고 모드로 렌더링합니다. 호환되도록하려면로 변경하십시오 content="IE=8".
IE8 모드는 W3C Cascading Style Sheets 레벨 2.1 사양 및 W3C 선택기 API를 포함하여 많은 표준을 지원합니다. 또한 W3C Cascading Style Sheets 레벨 3 사양 (작업 초안) 및 기타 새로운 표준에 대한 제한적인 지원을 제공합니다.
Edge 모드는 Internet Explorer에 사용 가능한 최고 모드로 콘텐츠를 표시하도록 지시합니다. Internet Explorer 9에서는 IE9 모드와 동일합니다. Internet Explorer의 이후 릴리스에서 더 높은 호환성 모드를 지원하면 에지 모드로 설정된 페이지가 해당 버전에서 지원하는 최고 모드로 나타납니다. Internet Explorer 9에서 볼 때 동일한 페이지가 여전히 IE9 모드로 나타납니다.
참조 <메타 HTTP-당량 = "IE = 엣지" "X-UA 호환"내용>합니까 무엇?
추가 필요- <meta http-equiv="X-UA-Compatible" content="IE=edge">
Bootstrap 3을 사용하고있었습니다. 내 로컬의 IE에서 작동했습니다.
IE에서 작동하지 않았다고 생각했습니다.
Just Bootstrap은 템플릿에 해당 코드 줄을 포함하지 않습니다. 왜 그런지 모르겠지만 W3C 호환이 아니기 때문일 수 있습니다.
이 문제에 대한 해결책이 있습니다. 실제로 IE7 및 8은 @media를 올바르게 지원하지 않으며 CSS에 "col-md- *"클래스가 있는지 확인하고 너비가 미디어 너비 992px로 제공됩니다. IE.css와 같은 새로운 CSS 파일을 만들고 조건부 주석을 추가하십시오. 그런 다음 디자인에 필요한 클래스를 미디어 쿼리와 함께 직접 복사하면 완료됩니다.
bootstrapv2에서 v3으로 마이그레이션 할 때 정확히 같은 문제가있었습니다.
예를 들어 이전 spanX를 col-sm-X로 교체하여 마이그레이션 한 경우 col-X 클래스도 추가해야합니다. col-X는 @media 블록 외부에있는 스타일이므로 미디어 쿼리 지원없이 작동합니다.
컨테이너 너비를 수정하기 위해 @media 블록 외부에 컨테이너 너비를 직접 설정할 수 있습니다. 다음과 같은 것 :
.container {
max-width: @container-tablet;
}
@import "twitter-bootstrap/less/bootstrap";
IE 10.0에서 동일한 문제가 발생했습니다. 나는 이것이 OP의 문제가 아니라는 것을 알고 있지만 다른 사람들에게는 유용 할 것입니다.
필자의 경우 문서 시작 부분에 빈 줄이 있습니다.
[blank line]
<!DOCTYPE html>
<html lang="es">
...
공백 행이 DOCTYPE과 태그 사이에 있으면 문제점도 표시됩니다.
<!DOCTYPE html>
[blank line]
<html lang="es">
빈 줄을 제거하고 마술 X-UA 호환 메타가 없으면 IE 10은 사이트를 올바르게 렌더링하기 시작했습니다.
PHP와 Smarty를 사용하는 경우 문제가있는 빈 줄을 추가하므로 Smarty 주석에주의하십시오. :-)
내 머리 태그는 다음과 같습니다
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Bootstrap core CSS -->
<link href="css/modern-business.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/modern-business.js"></script>
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.js"></script>
<![endif]-->
</head>
로컬에서 시도하고 싶다면 localhost를 통해 시도하거나 QA 서버를 만들고 내용을 설정하고 시도하십시오.
부트 스트랩 3에는 respond.js가 필요하며 js에 넣고 헤더의 html에 추가하면 로컬 컴퓨터에서 작동하지 않습니다. 액세스가 거부되었다고 표시됩니다. IE에는 보안 제한이 있으므로 서버를 통해서만 작동합니다. :피
여기에있는 모든 의견을 읽고 모든 것을 시도했지만 .. Windows 7-Internet Explorer 11 ( 문서 모드 : IE8 ) 에서 작동하지 못했습니다 .
그런 다음 문서 모드 (IE8)를 실행하는 것은 실제 IE8과 동일하지 않으므로 Windows Virtual PC ( Internet Explorer 8이 설치된 Windows 7 )와 tadaaaa를 설치했습니다 ... 매력처럼 작동합니다 !
이 코드 조각을 페이지 맨 아래에 배치하여 작동시킵니다.
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</body>
</html>
머릿결처럼. 나는 같은 문제가 있었고 위의 어느 것도 나를 위해 고치지 않았다. 결국 respond.js 가 @import 를 통해 참조되는 CSS를 구문 분석하지 않는다는 것을 알았습니다 . 내 전체 bootstrap.min.css를 통해 가져 왔습니다 .@importmain.css
따라서 @import 를 통해 참조 된 미디어 쿼리가 포함 된 CSS가 없는지 확인하십시오 .
아래 단계를 해결했습니다.
(1) drupal 7 용 Respond.js 모듈을 설치했습니다. (2) drupal 7 용 lessphp 모듈이 모듈 폴더 대신 라이브러리에 설정되어 있습니다. (3) (3.1)<meta http-equiv="X-UA-Compatible" content="IE=edge">
(3.2)
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
테마 설정에서 cdn 부트 스트랩 사용.
자세한 내용은 drupal 디자인 및 개발에 대한 내 웹 사이트 블로그를 참조하십시오 www.devangsolanki.com
Bootstrap 3을 사용하고 IE를 제외한 다른 브라우저에서 모든 것이 제대로 작동하면 아래를 시도하십시오.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
이 솔루션을 사용하십시오
<!--[if lt IE 9]>
<script src="js/css3-mediaqueries.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" />
<![endif]-->
이 문자열 <script src="js/css3-mediaqueries.js"></script>은 미디어 쿼리를 활성화합니다. 이 문자열 <link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" />은 부트 스트랩 글꼴을 활성화합니다.
부트 스트랩 3.3.5에서 테스트
mediaqieries.js 다운로드 링크 . bootstrap-ie7.css 다운로드 링크
부트 스트랩 소스를 별도로 연결하십시오
당신이 사용하는 경우 LESS또는 SASS스타일을 컴파일과 욕심으로하지 않습니다. 내 프로젝트에서는 bootstrap.min.css파일 상단에 기본 스타일을 포함 시켰 으므로 모든 스타일에 대해 하나의 요청 만 있어야합니다.
그로 인해 boostrap 클래스가 제대로 작동하지 않았습니다. 별도로 추가하면 예상대로 작동합니다.
나는 같은 문제에 직면하여 첫 번째 답변을 시도했지만 뭔가 빠졌습니다.
너희들이 Webpack을 사용한다면, CSS는 respond.js가 지원하지 않는 스타일 태그로로드 될 것입니다. 파일이 필요하므로 부트 스트랩이 CSS 파일로로드되는지 확인하십시오
개인적으로 사용했습니다 extract-text-webpack-plugin
const webpack = require("webpack")
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const path = require("path")
module.exports = {
context: __dirname+"/src",
entry: "./index.js",
output: {
filename: "./dist/bundle.js",
path: __dirname
},
plugins: [
...,
new ExtractTextPlugin("./dist/bootstrap.css", {
allChunks: true
})
],
module: {
loaders: [
...,
// your css loader excluding bootstrap
{
test: /\.css$/,
loader: "style!css",
exclude: [
path.resolve(__dirname, "node_modules/bootstrap/dist/css/bootstrap.css")
]
},
{
// loads bootstrap as a file, change path accordingly if needs be, path needs to be absolute
include: [
path.resolve(__dirname, "node_modules/bootstrap/dist/css/bootstrap.css")
],
loader: ExtractTextPlugin.extract("style-loader", "css-loader?minimize")
}
]
}
}
희망이 당신을 도울 것입니다
참고 URL : https://stackoverflow.com/questions/17947182/ie8-issue-with-twitter-bootstrap-3
'IT story' 카테고리의 다른 글
| CS0120 : 비 정적 필드, 메서드 또는 속성 'foo'에 개체 참조가 필요합니다. (0) | 2020.04.17 |
|---|---|
| Collections.emptyList () 대 새 인스턴스 (0) | 2020.04.17 |
| jquery Ajax 웹 서비스에 JSON 게시 (0) | 2020.04.17 |
| Markdown을 사용하여 GitHub 위키에서 이미지 크기 조정 (0) | 2020.04.17 |
| Java의 KeyValuePair (0) | 2020.04.17 |