Twitter Bootstrap 3의 IE8 이슈
저는 새로운 트위터 부트스트랩을 이용하여 사이트를 만들고 있습니다.그 사이트는 괜찮아 보이고 IE8을 제외한 모든 필수 브라우저에서 작동합니다.
IE8에서는 모바일 버전의 요소를 표시하는 것처럼 보이지만 데스크톱 전체 화면에 걸쳐 있습니다.문제는 트위터 부트스트랩이 먼저 모바일이라는 것입니다.그래서 어떤 이유에서인지 IE8은 이 옵션을 선택합니다.
저도 알아봤습니다.containerclass가 의도한 대로 최대 너비 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를 받았습니다. response.js는 로컬 파일에서만 작동합니다.따라서 IE8에서 bootstrap.css의 로컬 복사본을 사용하여 웹 사이트를 사용해 보십시오.또는 읽기: CDN/X-Domain Setup
참고참고 항목:https://github.com/scottjehl/Respond/pull/206
업데이트:
http://getbootstrap.com/getting-started/ #support 를 읽어 보십시오.
또한 Internet Explorer 8에서는 미디어 쿼리 지원을 활성화하려면 response.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">
부트스트랩 2에서 3으로 전환할 때도 이와 같은 문제가 있었습니다.이미 response.js와 html5shiv.js를 받고 메타를 에지로 설정했습니다.navbar 요소 유형이 2개에서 3개로 변경된 것을 놓쳤습니다.부트스트랩 2에서는 nav였습니다.부트스트랩 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">
단지 그것이 부트스트랩 사이트 자체가 가지고 있는 것이기 때문입니다.
저의 경우 부트스트랩 미니화된 CSS가 문제를 일으켰습니다.IE8에서 부트스트랩 3.0.2가 반응할 수 있도록 하려면(F12 Developer Tools를 사용하여 에뮬레이트) 다음과 같이 해야 했습니다.
1 - X-UA-Compatible 플래그를 설정합니다.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
2 - bootstrap.min.css 대신에 non-minimined bootstrap.css를 사용합니다.
<link href="/css/bootstrap.css" rel="stylesheet" />
3 - response.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 파일을 로드해야 합니다.
<head>~하듯이respond.js그것들만 받습니다.
앞서 언급한 바와 같이 두 가지 다른 문제가 있습니다: 1) IE8이 미디어 쿼리를 지원하지 않음 2) 크로스 도메인 css 파일과 함께 사용되는 response.js는 앞서 설명한 것과 같이 포함되어야 합니다.
부트스트랩을 사용하려면CDN의 작동 예는 다음과 같습니다.
<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]-->
또한 로컬 디렉토리에 response.proxy.gif, response.min.js 및 response.proxy.js를 복사해야 합니다.
확인 후:
- DOCTYPE
- X-UA 호환 메타태그
- html5shiv.js 및 response.js 포함 (그리고 최신 버전 다운로드)
- response.js가 로컬임
- 파일이 아닌 웹 서버에서 호스팅하는 사이트://
- @import를 사용하지 않음
- ...
여전히 col-lg, col-md, col-sm이 작동하지 않았습니다.마침내 html5shiv.js 및 response.js에 대한 참조 이전으로 bootstrap에 대한 참조를 이동했고 모두 작동했습니다.
다음은 토막글입니다.
<!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 Level 2.1 Specification 및 W3C Selectors API를 포함한 많은 확립된 표준을 지원합니다. 또한 W3C Cascading Style Sheets Level 3 Specification(Working Draft) 및 기타 새로운 표준에 대한 제한된 지원도 제공합니다.
Edge 모드는 Internet Explorer(인터넷 익스플로러)에서 사용 가능한 가장 높은 모드로 컨텐츠를 표시하도록 합니다.Internet Explorer 9의 경우 IE9 모드와 맞먹습니다.Internet Explorer(인터넷 익스플로러)의 향후 릴리스에서 상위 호환성 모드를 지원하는 경우 에지 모드로 설정된 페이지가 해당 버전에서 지원되는 가장 높은 모드로 나타납니다.Internet Explorer 9(인터넷 익스플로러 9)로 볼 때 동일한 페이지가 IE9 모드에서 계속 나타납니다.
참조 <meta http-equiv="X-UA-Compatible" content="란 무엇입니까?"IE=edge"> 해야 합니까?
추가할 필요가 있습니다.<meta http-equiv="X-UA-Compatible" content="IE=edge">
부트스트랩 3을 사용하고 있었는데 로컬에서 IE에서 작동하고 있었습니다.
IE에서는 작동하지 않았습니다.
단지 부트스트랩은 그들의 템플릿에 해당 코드 라인을 포함하지 않습니다. 이유는 모르겠지만 W3C 호환이 되지 않기 때문일 수 있습니다.
저는 이 문제에 대해 해결책이 있습니다.실제로 IE7과 8은 @media를 제대로 지원하지 않으며 "col-md-*" 클래스의 CSS를 확인하면 미디어 너비 992px로 제공됩니다.새로운 css 파일 IE 예: IE.css를 만들고 조건부 코멘트를 추가하면 됩니다.그런 다음 설계에 필요한 클래스를 미디어 쿼리와 직접 복사하면 됩니다.
부트스트랩 v2에서 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-Compatible 메타 없이 IE 10이 사이트를 올바르게 렌더링하기 시작했습니다.
PHP와 스마티를 사용하는 경우 스마티 코멘트는 문제가 되는 빈 줄을 추가하기 때문에 주의해야 합니다 :-)
제 머리표는 이렇습니다.
<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 서버를 생성하여 컨텐츠를 설정하고 시도합니다.
bootstrap 3을 위해서 response.js가 필요하고 js에 넣어서 html in header에 추가하면 로컬머신에서 작동하지 않습니다.접근이 거부되었다고 표시됩니다.IE에 보안 제한이 있으므로 서버를 통해서만 작동합니다. :P
여기 있는 모든 댓글을 다 읽었고, 모든 걸 시도했습니다.Windows 7(윈도우 7) - Internet Explorer 11(문서 모드: IE8)에서 작동할 수 없습니다.
그러던 중 문서 모드(IE8)를 실행하는 것이 실제 IE8과 같지 않다는 생각이 들어 윈도우 버추얼 PC(Windows 7 with Internet Explorer 8)를 설치하고 tadaaaaaa...매력적으로 느껴집니다!
이 코드를 작동시키기 위해 페이지 맨 아래에 넣었습니다.
<!-- 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>
주의를 기울이는 것처럼.저도 같은 문제가 있었는데 위의 것들 중 어떤 것도 고쳐주지 않았습니다.결국 저는 response.js가 @import를 통해 참조된 CSS를 파싱하지 않는다는 것을 알게 되었습니다.나는 모든 것을 가지고 있었습니다.bootstrap.min.css를 통해 @importo속으로main.css.
따라서 @import를 통해 참조되는 미디어 쿼리를 포함하는 CSS가 없는지 확인합니다.
아래 단계로 해결했습니다.
(설정된 1) (1) drupal 7 response.js module . (2) module 된 drupal 7 lessphp module. (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 부트스트랩을 사용합니다.
자세한 내용은 제 웹사이트 블로그에서 드루팔 디자인 및 개발에 대해 검토해보세요. www.devangsolanki.com
만약 부트스트랩 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>미디어 쿼리를 사용합니다.g<link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" />부트스트랩 글꼴을 활성화합니다.
부트스트랩 3.3.5에서 테스트됨
mediaquies.js 다운로드 링크.부트스트랩-ie7.css 다운로드 링크
부트스트랩 소스를 별도로 연결해야 합니다.
사용하는 경우LESS아니면SASS스타일을 짜는데 너무 욕심을 부리지 마세요.시켰습니다를 시켰습니다.bootstrap.min.css파일 상단에 있는 제 메인 스타일에서는 모든 스타일에 대한 요청이 하나만 있어야 합니다.
그리고 그것 때문에, 부스트랩 수업이 제대로 작동하지 않았습니다.별도로 추가하면 예상대로 작동합니다.
저도 같은 문제에 직면했고, 첫 번째 답을 시도했지만 뭔가 부족했습니다.
웹팩을 사용하는 경우, cs는 response.js에서 지원하지 않는 스타일 태그로 로드됩니다. 파일이 필요하므로 부트스트랩이 cs 파일로 로드되었는지 확인하십시오.
개인적으로 사용했습니다.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
'programing' 카테고리의 다른 글
| $My Invocation.나의 사령부.경로 반환 NULL (0) | 2023.10.03 |
|---|---|
| CMake를 사용하여 .dll 생성 (0) | 2023.10.03 |
| j페이지 레이아웃의 공간을 보존하는 동안 요소를 숨깁니다. (0) | 2023.10.03 |
| Postgre와 같은 MYSQL 배열 Aggregate 함수SQL array_agg (0) | 2023.10.03 |
| JQuery에서 URL 해시/히스토리를 수행하기에 가장 좋은 라이브러리는 무엇입니까? (0) | 2023.10.03 |