Twitter 부트 스트랩 3의 IE8 문제

228

새로운 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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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>
html  css  twitter-bootstrap  internet-explorer-8  twitter-bootstrap-3 
— 레이 본
소스
1
어서 오십시오. 질문에 코드를 게시하십시오. 이렇게하면 링크가 더 이상 작동하지 않는 미래에이 질문을 보는 사람에게 도움이됩니다.
— Mark Chorley
1
감사! 나는 지금 그것을 편집했다, 건배.
— wrayvon

답변:

260

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]-->
— 베이스 잡센
소스
내가 둔 해지면 용서해주십시오 ...하지만 respond.js??
— Chris Kempen
6
사과, 난 항상 우스운 질문 을 게시 한 후 적절한 솔루션을 찾는 것 같습니다 ... getbootstrap.com/getting-started (특히 "Internet Explorer 8 및 9"섹션 아래)를 확인하십시오. :)
— Chris Kempen
1
어떤 파일이 로컬에 존재해야합니까, 어떤 파일이 CDN에서 사용될 수 있습니까? bootsrap.css, bootstrap.js, respond.js, html5shiv.js 파일?
— trante
3
로컬 respond.js
— Bass Jobsen
6
또한 미디어 쿼리가 포함 된 CSS 파일 뒤에 Respond.js를 정의해야합니다. 그렇지 않으면 IE8에서 처리되지 않습니다.
— helios456 12
62

또한 다음 META 태그를 설정해야했습니다.

<meta http-equiv="X-UA-Compatible" content="IE=edge">
— 데미안
소스
내가 사용하고 : <div class="left-finger-picker img-responsive">: 이미지 보여주기 위해 left-finger-picker다음과 같이한다 : .left-finger-picker { width: 200px; height: 210px; position : relative; background-size: cover; background-image : url("../myPics/leftHand.png"); background-repeat: no-repeat; background-size: contain; } 그러나, 그것은 IE8에서 응답하지
— 하면서 스토리지 Aqajani
17

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 사이트 자체에있는 것이기 때문입니다.

— 질 로버츠
소스
내가 사용하고 : <div class="left-finger-picker img-responsive">: 이미지 보여주기 위해 left-finger-picker다음과 같이한다 : .left-finger-picker { width: 200px; height: 210px; position : relative; background-size: cover; background-image : url("../myPics/leftHand.png"); background-repeat: no-repeat; background-size: contain; } 그러나, 그것은 IE8에서 응답하지
— 하면서 스토리지 Aqajani
14

필자의 경우 부트 스트랩 축소 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]-->
— 페드루 스키
소스
필자의 경우 부트 스트랩 축소 CSS는 IE8에서 문제를 일으켰습니다.
— hrvoj3e
내가 사용하고 : <div class="left-finger-picker img-responsive">: 이미지 보여주기 위해 left-finger-picker다음과 같이한다 : .left-finger-picker { width: 200px; height: 210px; position : relative; background-size: cover; background-image : url("../myPics/leftHand.png"); background-repeat: no-repeat; background-size: contain; } 그러나, 그것은 IE8에서 응답하지
— 하면서 스토리지 Aqajani
6

넣어 respond.js페이지의 맨 아래에 있지만 닫기 전에 body태그를 여기의 링크가 respond.js하고 로컬 호스트에서이 코드를 실행합니다.

https://github.com/scottjehl/Respond

— 지니 쉬 케니
소스
이것에 감사드립니다.하지만 언급하지 않았지만 이것은 이미 plugins.js 파일에 포함되어 있습니다.
— wrayvon
중요한 것은 스타일 시트 다음에respond.js 로드해야한다는 것입니다 .
— piotr_cz
6

만일을 위해서. CSS 파일을로드 한 후 IE 특정 js 파일을로드하십시오.

— 텐잭
소스
5

앞에서 언급했듯이 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="https://stackoverflow.com//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를 복사해야합니다.

— 마테오 로시
소스
4

확인 후 :

  • 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>
— 제임스 클리 머
소스
2
내 문제를 해결하려면 여기에 조언 된대로 bootstrap.min.css를 이동해야했습니다. .css 파일 만 이동했는데 .js 스틸 파일은 계속로드됩니다.
— 채드 맥그래스
컴파일 된 CSS 파일 (부트 스트랩 포함)을 html5shim 위로 옮기고 응답하는 것이 나에게 해결책이되었습니다.
— Friendly Code
2

설명에서 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 호환"내용>합니까 무엇?

— 덱스 테어
소스
1

추가 필요- <meta http-equiv="X-UA-Compatible" content="IE=edge">

Bootstrap 3을 사용하고있었습니다. 내 로컬의 IE에서 작동했습니다.

IE에서 작동하지 않았다고 생각했습니다.

Just Bootstrap은 템플릿에 해당 코드 줄을 포함하지 않습니다. 왜 그런지 모르겠지만 W3C 호환이 아니기 때문일 수 있습니다.

— Getsomepeaches
소스
1

이 문제에 대한 해결책이 있습니다. 실제로 IE7 및 8은 @media를 올바르게 지원하지 않으며 CSS에 "col-md- *"클래스가 있는지 확인하고 너비가 미디어 너비 992px로 제공됩니다. IE.css와 같은 새 CSS 파일을 만들고 조건부 주석을 추가하십시오. 그런 다음 디자인에 필요한 클래스를 미디어 쿼리와 함께 직접 복사하면 완료됩니다.

— 데니스
소스
0

bootstrapv2에서 v3으로 마이그레이션 할 때 정확히 같은 문제가있었습니다.

(나처럼) 이전 spanX를 col-sm-X로 교체하여 마이그레이션 한 경우 col-X 클래스도 추가해야합니다. col-X는 @media 블록 외부에있는 스타일이므로 미디어 쿼리 지원없이 작동합니다.

컨테이너 너비를 수정하기 위해 @media 블록 외부에 컨테이너 너비를 직접 설정할 수 있습니다. 다음과 같은 것 :

.container {
  max-width: @container-tablet;
}
@import "twitter-bootstrap/less/bootstrap";
— 앤디 베리 88
소스
좋아, 그래서 col-X 클래스가 모바일 장치에 사용되기 때문에 문제를 100 % 해결하지 못한다는 것을 알았습니다. 드로잉 보드로 돌아 가기 ...
— andyberry88
col-X 클래스는 스택되지 않으므로 작은 장치에서는 문제가 발생합니다. 또한 솔루션은 미디어 쿼리에 의존하는 @ grid-float-breakpoint의 문제를 해결하지 않으므로 탐색 표시 줄이 수평이되지 않습니다. 또한보십시오 : stackoverflow.com/a/17920693/1596547
— Bass Jobsen
0

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 주석에주의하십시오.

— 구골
소스
0

내 머리 태그는 다음과 같습니다

<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를 통해 시도하거나 localhost를 통해 시도하거나 QA 서버를 만들고 내용을 설정하고 시도하십시오.

부트 스트랩 3에는 respond.js가 필요하며 js에 넣고 헤더의 html에 추가하면 로컬 컴퓨터에서 작동하지 않습니다. 액세스가 거부되었다고 표시됩니다. IE에는 보안 제한이 있으므로 서버를 통해서만 작동합니다. :피

— Sandeepnpn
소스
0

나는 여기에있는 모든 의견을 읽고 모든 것을 시도했지만 .. 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>
— Sneeuw
소스
Respond.js 및 프록시 파일도 cdnjs.cloudflare.com에서 호스팅됩니다. 체크 아웃 cdnjs.com/libraries/respond.js을 문서 / 링크 및 부트 스트랩 3.03도 있습니다 호스팅 : cdnjs.com/libraries/twitter-bootstrap
— 트로이 모어 하우스
0

머릿결처럼. 나는 같은 문제가 있었고 위의 어느 것도 나를 위해 고치지 않았다. 결국 respond.js 가 @import 를 통해 참조되는 CSS를 구문 분석하지 않는다는 것을 알았습니다 . 나는 전체 bootstrap.min.css를 통해 @import내 수입 했다main.css .

따라서 @import 를 통해 참조 된 미디어 쿼리가 포함 된 CSS가 없는지 확인하십시오 .

— 알렉스 수투
소스
0

아래 단계를 해결했습니다.

(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

— 사용자 3471193
소스
1
1 단계와 2 단계는 질문과 어떻게 관련이 있습니까? 문제는 IE8과 부트 스트랩에 있습니다. Drupal은 질문에 언급되지 않았습니다.
— Adam Zuckerman
0

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]-->
— 부 투바
소스
내가 게시 한 솔루션 인 Hi Phill Healy가 나를 위해 일했습니다. 귀하의 의견은 건설적이지 않습니다. 도움이 필요하시면 더 자세한 정보를 제공하셔야합니다
— vutbao
1
@vutbao 부트 스트랩은> IE8 버전에서 작동합니다. IE8에서 작동하려면 부트 스트랩 CDN을 사용하는 경우 respondjs를 추가해야하지만 응답자는 작동하지 않습니다. Bass Jobsen의 답변을 읽는 시간을 가지십시오.
— Wreeecks
@Vutbao, 귀하의 답변 이이 성격의 모든 Bootstrap 3 문제에 대한 결정적인 답변이라고 말하는 것은 정확하지 않습니다. 그러나 그것이 당신의 대답입니다. bwaaaaaa는 고려해야 할 많은 문제가 있음을 나타냅니다. 문서 수 있습니다 예를 들어 또 다른 문제는 쿼크 모드 등에
— 필 힐리
요점을 알았어. 나는 표현에 더 조심할 것이다. 감사합니다
— vutbao
0

이 솔루션을 사용하십시오 

<!--[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 다운로드 링크

— AC1D
소스
0

부트 스트랩 소스를 별도로 연결하십시오

당신이 사용하는 경우 LESS또는 SASS스타일을 컴파일과 욕심으로하지 않습니다. 내 프로젝트에서는 bootstrap.min.css파일 상단에 기본 스타일을 포함 시켰 으므로 모든 스타일에 대해 하나의 요청 만 있어야합니다.

그로 인해 boostrap 클래스가 제대로 작동하지 않았습니다. 별도로 추가하면 예상대로 작동합니다.

— 에타이
소스
0

나는 같은 문제에 직면하여 첫 번째 대답을 시도했지만 뭔가 빠졌습니다.

너희들이 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")
            }
        ]
    }
}

희망이 당신을 도울 것입니다

— 사미 트리 키
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.