ปัญหา IE8 กับ Twitter Bootstrap 3

228

ฉันกำลังสร้างเว็บไซต์โดยใช้ Twitter Bootstrap ใหม่ ไซต์ดูดีและทำงานได้ในเบราว์เซอร์ที่จำเป็นทั้งหมดยกเว้น IE8

ใน IE8 ดูเหมือนว่าจะแสดงองค์ประกอบของรุ่นมือถือ แต่ขยายไปทั่วหน้าจอเต็มของเดสก์ท็อปของฉัน ฉันเชื่อว่าปัญหาที่ฉันมีก็คือ Twitter bootstrap นั้นเป็นอุปกรณ์พกพาก่อน ดังนั้นด้วยเหตุผลบางอย่าง 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 
— wrayvon
แหล่งที่มา
1
ยินดีต้อนรับ กรุณาโพสต์รหัสในคำถามเช่นกัน สิ่งนี้จะช่วยให้ใครก็ตามที่ดูคำถามนี้ในอนาคตปีที่ผ่านมาเมื่อลิงก์ของคุณไม่ทำงานอีกต่อไป
— Mark Chorley
1
ขอบคุณ! ฉันแก้ไขมันแล้ว
— wrayvon

คำตอบ:

260

คุณได้รับ CSS จาก CDN (bootstrapcdn.com) response.js ใช้ได้กับไฟล์ในเครื่องเท่านั้น ดังนั้นให้ลองเว็บไซต์ของคุณบน IE8 ด้วยสำเนา bootstrap.css หรืออ่าน: การตั้งค่า CDN / X-Domain

หมายเหตุดูเพิ่มเติมที่: 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]-->
— Bass Jobsen
แหล่งที่มา
โปรดยกโทษให้ฉันถ้าฉันถูกป้าน ... แต่respond.js??
— Chris Kempen
6
ขออภัยฉันมักจะหาวิธีแก้ไขที่เหมาะสมหลังจากโพสต์คำถามที่ไร้สาระ ... ลองดูที่getbootstrap.com/getting-started (โดยเฉพาะภายใต้หัวข้อ "Internet Explorer 8 และ 9") :)
— Chris Kempen
1
ไฟล์ใดที่ควรจะมีอยู่ภายในเครื่องไฟล์ใดบ้างที่สามารถใช้จาก CDN bootsrap.css, bootstrap.js, response.js, ไฟล์ html5shiv.js?
— trante
3
local.j.js ทำงานได้เฉพาะกับสำเนาบูตท้องถิ่น (โดเมนเดียวกัน) ดูที่นี่github.com/scottjehl/Respond#cdnx-domain-setup
— Bass Jobsen
6
โปรดทราบด้วยว่าต้องมีการกำหนด Respond.js หลังจากไฟล์ css ซึ่งมีข้อความค้นหาสื่อ มิเช่นนั้นจะไม่ถูกประมวลผลใน IE8
— helios456
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
— Hosein Aqajani
17

ฉันมีปัญหาเดียวกันนี้เมื่อเปลี่ยนจาก Bootstrap 2 เป็น 3 ฉันได้รับ response.js และ html5shiv.js แล้วตั้งเมตาของฉันเป็นขอบ ฉันพลาดไปตั้งแต่ 2 ถึง 3 ประเภทองค์ประกอบ navbar ได้เปลี่ยนไป ใน Bootstrap 2 เป็น nav ใน 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
— Hosein Aqajani
14

ในกรณีของฉัน bootstrap minified CSS เป็นสาเหตุของปัญหา ในการทำให้ bootstrap 3.0.2 ตอบสนองใน IE8 (จำลองโดยใช้เครื่องมือสำหรับนักพัฒนา F12) ฉันต้อง:

1 - ตั้งค่าสถานะ X-UA-Compatible

<meta http-equiv="X-UA-Compatible" content="IE=edge">

2 - ใช้ bootstrap.css ที่ไม่ใช่แบบย่อแทน bootstrap.min.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]-->
— pedrusky
แหล่งที่มา
ในกรณีของฉัน bootstrap minified 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
— Hosein Aqajani
6

ใส่respond.jsที่ด้านล่างของหน้า แต่ก่อนที่จะปิดbodyแท็กและนี่คือลิงค์respond.jsและเรียกใช้รหัสนี้ใน localhost ของคุณ

https://github.com/scottjehl/Respond

— jignesh kheni
แหล่งที่มา
ขอบคุณสำหรับสิ่งนี้ลืมที่จะพูดถึงว่านี้รวมอยู่ในไฟล์ปลั๊กอินของฉันแล้ว
— wrayvon
สิ่งสำคัญคือrespond.jsควรโหลดหลังจากสไตล์ชีท
— piotr_cz
6

ในกรณีที่ ตรวจสอบให้แน่ใจว่าคุณโหลดไฟล์ js เฉพาะ IE หลังจากที่คุณโหลดไฟล์ css

— TenJack
แหล่งที่มา
5

อย่าลืมที่จะวางลิงค์ CSS ของคุณใน<head>ขณะที่respond.jsใช้เวลาเพียงเหล่านั้น

— Angel Yordanov
แหล่งที่มา
5

ตามที่ระบุไว้ก่อนหน้านี้มีสองปัญหาที่แตกต่างกัน: 1) IE8 ไม่รองรับการสืบค้นสื่อ 2) response.js ที่ใช้ร่วมกับไฟล์ css ข้ามโดเมนจะต้องรวมไว้ตามที่อธิบายไว้ก่อนหน้านี้

หากคุณต้องการใช้ 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]-->

ตรวจสอบให้แน่ใจว่าได้คัดลอก respons.proxy.gif, response.min.js และ response.proxy.js ในไดเรกทอรีท้องถิ่น

— มัตเตโอรอสซี
แหล่งที่มา
4

หลังจากยืนยันแล้ว:

  • DOCTYPE
  • เมตาแท็กที่เข้ากันได้กับ X-UA
  • รวม html5shiv.js และ response.js (และดาวน์โหลดเวอร์ชันล่าสุด)
  • response.js อยู่ในท้องถิ่น
  • โฮสต์ไซต์จากเว็บเซิร์ฟเวอร์ไม่ใช่จากไฟล์: //
  • ไม่ได้ใช้ @import
  • ...

ยังคง col-lg, col-md และ col-sm ไม่ทำงาน ในที่สุดฉันก็ย้ายการอ้างอิงไปยัง bootstrap ให้อยู่ก่อนการอ้างอิงไปยัง html5shiv.js และ response.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>
— James Climer
แหล่งที่มา
2
การย้าย bootstrap.min.css ตามคำแนะนำที่นี่มีความจำเป็นเพื่อแก้ไขปัญหาของฉัน ฉันย้ายเฉพาะไฟล์. css เท่านั้นไฟล์. js ยังคงโหลดหลังจากนั้น
— ชาด McGrath
การย้ายไฟล์ CSS ที่คอมไพล์แล้วของฉัน (รวมถึง Bootstrap) ด้านบน html5shim และการตอบสนองเป็นวิธีแก้ปัญหาสำหรับฉัน - ขอบคุณ
— รหัสที่เป็นมิตร
2

จากคำอธิบายมันบอกว่า IE8 เป็นรุ่นมาตรฐานสำหรับคุณและการสร้างcontent="IE=edge"จะแสดงหน้าในโหมดสูงสุด content="IE=8"ที่จะทำให้มันเข้ากันได้เปลี่ยนแปลงไป

โหมด IE8 รองรับมาตรฐานที่กำหนดขึ้นมากมายรวมถึง W3C Cascading Style Sheets Level 2.1 Specification และ W3C Selectors API; มันยังให้การสนับสนุนที่ จำกัด สำหรับ W3C Cascading Style Sheets ระดับ 3 ข้อมูลจำเพาะ (Working Draft) และมาตรฐานอื่น ๆ

โหมด Edge บอกให้ Internet Explorer แสดงเนื้อหาในโหมดสูงสุดที่มี ด้วย Internet Explorer 9 สิ่งนี้เทียบเท่ากับโหมด IE9 หาก Internet Explorer ในอนาคตรองรับโหมดความเข้ากันได้สูงกว่าหน้าเว็บที่ตั้งค่าเป็นโหมด Edge จะปรากฏในโหมดสูงสุดที่รองรับโดยเวอร์ชันนั้น หน้าเดียวกันเหล่านั้นจะยังคงปรากฏในโหมด IE9 เมื่อดูด้วย Internet Explorer 9

การอ้างอิง<meta http-equiv = "X-UA-Compatible" content = "IE = edge"> ทำอะไร

— Dextere
แหล่งที่มา
1

จำเป็นต้องเพิ่ม - <meta http-equiv="X-UA-Compatible" content="IE=edge">

ฉันใช้ Bootstrap 3 - ใช้กับ IE บนเครื่องของฉันหรือไม่

ฉันทำให้มันใช้งานไม่ได้ใน IE

เพียงแค่ Bootstrap ไม่ได้รวมบรรทัดของรหัสนั้นไว้ในแม่แบบของพวกเขาฉันไม่แน่ใจว่าทำไม แต่อาจเป็นเพราะมันไม่รองรับ W3C

— Getsomepeaches
แหล่งที่มา
1

ฉันได้แก้ไขปัญหานี้แล้ว ที่จริงแล้ว IE7 และ 8 ไม่รองรับ @media อย่างถูกต้องและถ้าคุณตรวจสอบ css สำหรับคลาส "col-md- *" และมีความกว้างให้ในความกว้างของสื่อ 992px เพียงแค่สร้างไฟล์ CSS ใหม่ IE เช่น: IE.css และเพิ่มความคิดเห็นตามเงื่อนไข และจากนั้นเพียงคัดลอกคลาสที่จำเป็นสำหรับการออกแบบของคุณโดยตรงด้วยการสอบถามสื่อใด ๆ ที่นั่นและคุณทำเสร็จแล้ว

— เดนิส
แหล่งที่มา
0

ฉันมีปัญหาเดียวกันเมื่อทำการโยกย้ายจาก bootstrapv2 ไปเป็น v3

หาก (เช่นฉัน) คุณย้ายโดยแทนที่ spanX ด้วย col-sm-X คุณต้องเพิ่มคลาส col-X ด้วย col-X เป็นสไตล์ที่อยู่นอกบล็อค @media ใด ๆ เพื่อให้ทำงานได้โดยไม่ต้องรองรับการสืบค้นสื่อ

หากต้องการแก้ไขความกว้างคอนเทนเนอร์คุณสามารถตั้งค่าด้วยตนเองนอกบล็อก @media สิ่งที่ต้องการ:

.container {
  max-width: @container-tablet;
}
@import "twitter-bootstrap/less/bootstrap";
— andyberry88
แหล่งที่มา
ตกลงพบว่าไม่สามารถแก้ปัญหาได้ 100% เนื่องจากมีการใช้คลาส col-X สำหรับอุปกรณ์มือถือ กลับไปที่กระดานวาดภาพ ...
— andyberry88
คลาส col-X จะไม่ซ้อนกันดังนั้นคุณจึงแก้ปัญหาได้ในอุปกรณ์ขนาดเล็ก วิธีการแก้ปัญหาของคุณยังไม่ได้แก้ไขปัญหากับ @ grid-float-เบรกพอยต์ซึ่งยังขึ้นอยู่กับแบบสอบถามสื่อเพื่อให้ navbar ของคุณจะไม่กลายเป็นแนวนอน ดูเพิ่มเติมที่: 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-Compatible แล้ว IE 10 ก็เริ่มแสดงผลไซต์ได้อย่างถูกต้อง

หากคุณกำลังใช้ PHP และ Smarty ระมัดระวังความคิดเห็น Smarty ของคุณเพราะพวกเขาจะเพิ่มบรรทัดว่างที่เป็นปัญหา :-)

— googol
แหล่งที่มา
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 หรือสร้างเซิร์ฟเวอร์ QA และตั้งค่าเนื้อหาและลอง

เราต้องการ response.js สำหรับ bootstrap 3 และมันจะไม่ทำงานในเครื่องท้องถิ่นถ้าเราเพิ่งใส่มันลงใน js และต่อท้ายมันเพื่อ html ในส่วนหัว มันจะบอกว่าการเข้าถึงถูกปฏิเสธ มันทำงานผ่านเซิร์ฟเวอร์เท่านั้นเนื่องจาก IE มีข้อ จำกัด ด้านความปลอดภัย : P

— sandeepnpn
แหล่งที่มา
0

ฉันได้อ่านความคิดเห็นทั้งหมดที่นี่ลองทุกอย่าง .. แต่ไม่สามารถใช้งานได้กับWindows 7 - Internet Explorer 11 ( พร้อมโหมดเอกสาร: IE8 )

จากนั้นก็ทราบว่าการใช้งานโหมดเอกสาร (IE8) นั้นไม่เหมือนกับ IE8 จริงดังนั้นฉันจึงติดตั้งWindows Virtual PC ( Windows 7 ที่มี Internet Explorer 8 ) และ 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 และไฟล์พรอกซียังโฮสต์บน cdnjs.cloudflare.com ตรวจสอบ cdnjs.com/library/respond.jsสำหรับ docs / links, และ bootstrap 3.03 มีโฮสต์อยู่ที่นั่น: cdnjs.com/l ไลบรารี/twitter
— ทรอย Morehouse
0

เหมือนหัวขึ้น ฉันมีปัญหาเดียวกันและไม่มีการแก้ไขข้างต้นสำหรับฉัน ในที่สุดผมพบว่าrespond.jsไม่แยก CSS อ้างอิงทาง@import ผมมีทั้งbootstrap.min.cssที่นำเข้าผ่านทางเข้าของฉัน@importmain.css

เพื่อให้แน่ใจว่าคุณไม่ได้มี CSS ใด ๆ ที่มีสื่อของคุณแบบสอบถามอ้างอิงทาง@import

— อเล็กซ์สุตู
แหล่งที่มา
0

ฉันได้แก้ไขขั้นตอนด้านล่างแล้ว

(1) ติดตั้งโมดูล Respond.js สำหรับ drupal 7 (2) โมดูล lessphp สำหรับ drupal 7 ที่ตั้งค่าในไลบรารีแทนที่จะเป็นโฟลเดอร์โมดูล (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 bootstrap จากการตั้งค่าธีม

หากต้องการเรียนรู้เพิ่มเติมตรวจสอบบล็อกเว็บไซต์ของฉันสำหรับการออกแบบและพัฒนาdrupal www.devangsolanki.com

— user3471193
แหล่งที่มา
1
ขั้นตอนที่ 1 และ 2 เกี่ยวข้องกับคำถามอย่างไร ปัญหาเกิดขึ้นกับ IE8 และ bootstrap 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]-->
— vutbao
แหล่งที่มา
สวัสดี Phill Healy โซลูชันที่ฉันโพสต์นั้นเหมาะกับฉัน ความคิดเห็นของคุณไม่สร้างสรรค์ คุณต้องให้รายละเอียดเพิ่มเติมหากคุณต้องการความช่วยเหลือ
— vutbao
1
@vutbao bootstrap ทำงานกับรุ่น> IE8 หากคุณต้องการให้มันทำงานใน IE8 คุณต้องเพิ่มการตอบกลับ แต่จะไม่ทำงานหากคุณใช้ bootstrap CDN ใช้เวลาอ่านคำตอบของ Bass Jobsen
— Wreeecks
@Vutbao ที่จะบอกว่าคำตอบของคุณคือคำตอบที่ชัดเจนสำหรับทุกปัญหา Bootstrap 3 ในลักษณะนี้ไม่ถูกต้อง แต่นั่นคือคำตอบของคุณ เนื่องจาก bwaaaaaa บ่งชี้ว่ามีหลายประเด็นที่ต้องพิจารณา ปัญหาตัวอย่างเช่นอาจจะมีเอกสารอื่นที่อยู่ในโหมดนิสัยใจคอ ฯลฯ
— Phill Healey
จุดที่ถ่าย ฉันจะระวังข้อความให้ดีขึ้น ขอบคุณ
— 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>เปิดใช้งาน Mediaqueries สตริงนี้<link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" />เปิดใช้งานแบบอักษร bootstrap

ทดสอบบน Bootstrap 3.3.5

เชื่อมโยงไปยังดาวน์โหลด mediaqieries.js ลิงก์เพื่อดาวน์โหลด bootstrap-ie7.css

— Ac1d
แหล่งที่มา
0

ตรวจสอบให้แน่ใจว่าคุณเชื่อมโยงแหล่งบู๊ตสแตรปแยกต่างหาก

หากคุณใช้LESSหรือSASSไม่โลภด้วยการรวบรวมสไตล์ ในโครงการของฉันฉันรวมbootstrap.min.cssในสไตล์หลักของฉันที่ด้านบนของไฟล์ - ดังนั้นควรมีเพียงคำขอเดียวสำหรับทุกสไตล์

และด้วยเหตุนี้คลาส Boostrap จึงทำงานไม่ถูกต้อง เมื่อเพิ่มแยกต่างหากทำงานตามที่คาดไว้

— Atais
แหล่งที่มา
0

ฉันประสบปัญหาเดียวกันลองคำตอบแรก แต่มีบางอย่างขาดหายไป

หากคุณใช้ Webpack css ของคุณจะถูกโหลดเป็นแท็กสไตล์ซึ่งไม่รองรับโดย response.js ก็ต้องใช้ไฟล์ดังนั้นต้องแน่ใจว่า bootstrap ถูกโหลดเป็นไฟล์ 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")
            }
        ]
    }
}

หวังว่ามันจะช่วยคุณ

— Sami Triki
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.