IE8 मुद्दा ट्विटर बूटस्ट्रैप 3 के साथ

228

मैं नए ट्विटर बूटस्ट्रैप का उपयोग करके एक साइट बना रहा हूं। साइट ठीक लगती है और IE8 को छोड़कर सभी आवश्यक ब्राउज़रों में काम करती है।

IE8 में यह मोबाइल संस्करण के तत्वों को प्रदर्शित करता प्रतीत होता है, लेकिन मेरे डेस्कटॉप की पूरी स्क्रीन पर फैला हुआ है। मुझे विश्वास है कि मेरे पास समस्या यह है कि ट्विटर बूटस्ट्रैप पहले मोबाइल है। तो किसी कारण से IE8 इस विकल्प के लिए जा रहा है।

मैं यह भी ध्यान देता हूं कि containerवर्ग अधिकतम-चौड़ाई वाली सीएसएस संपत्तियों में इच्छानुसार नहीं खींच रहा है। क्या कोई देख सकता है कि मैंने क्या गलत किया है?

<!-- 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
स्वागत हे। कृपया प्रश्न में कोड भी पोस्ट करें। यह किसी को भी भविष्य के वर्षों में इस सवाल को देखने में मदद करेगा जब आपका लिंक किसी भी अधिक काम नहीं करता है।
— मार्क चोरले
1
धन्यवाद! मैंने इसे अभी संपादित किया है, चीयर्स।
— रेवोन

जवाबों:

260

आपको अपना CSS CDN (bootstrapcdn.com) response.js से मिला है, जो केवल स्थानीय फ़ाइलों के लिए काम करता है। तो IE8 पर अपनी वेबसाइट को बूटस्ट्रैप की एक स्थानीय प्रतिलिपि के साथ आज़माएं। या पढ़ें: सीडीएन / एक्स-डोमेन सेटअप

नोट यह भी देखें: https://github.com/scottjehl/Respond/pull/206

अपडेट करें:

कृपया पढ़ें: http://getbootstrap.com/getting-started/#support

इसके अलावा, इंटरनेट एक्सप्लोरर 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]-->
— बास जॉब्स
स्रोत
कृपया मुझे माफ़ कर दो अगर मैं आज्ञाकारी हो रहा हूँ ... लेकिन respond.js??
— क्रिस केम्पेन
6
माफी, मैं हमेशा हास्यास्पद सवालों को पोस्ट करने के बाद उचित समाधान खोजने लगता हूं ... getbootstrap.com/getting-started (विशेष रूप से "इंटरनेट एक्सप्लोरर 8 और 9" अनुभाग के तहत) की जांच करें। :)
— क्रिस केम्पेन
1
कौन सी फाइलें स्थानीय रूप से मौजूद होनी चाहिए, कौन सी सीडीएन से उपयोग की जा सकती हैं? bootrap.css, bootstrap.js, response.js, html5shiv.js फाइलें?
— ट्रांटे
3
एक स्थानीय response.js केवल बूटस्ट्रैप (एक ही डोमेन) की स्थानीय कॉपी के साथ काम करता है, यहाँ देखें github.com/scottjehl/Respond#cdnx-domain-setup
— बास जॉब्स
6
यह भी ध्यान दें कि Respond.js को css फ़ाइल के बाद परिभाषित करने की आवश्यकता है जिसमें मीडिया प्रश्न शामिल हैं। अन्यथा, उन्हें IE8 में संसाधित नहीं किया जाएगा
— helios456
62

मुझे निम्नलिखित मेटा टैग भी सेट करना था:

<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 में उत्तरदायी नहीं है
— होज़िन अकाजानी
17

जब बूटस्ट्रैप 2 से 3 में संक्रमण हो रहा था, तो मेरे पास यही मुद्दा था। मुझे पहले से ही प्रतिक्रिया मिली। js और html5shiv.js और मेरे मेटा को किनारे पर सेट करें। मुझे याद था कि 2 से 3 तक नेबर तत्व प्रकार बदल गया था। बूटस्ट्रैप 2 में यह नौसेना थी। बूटस्ट्रैप 3 में यह अब हेडर है। तो मुझे उस समस्या का पूरी तरह से समाधान करना था

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

अपना सीएसएस लोड करने के बाद यह अधिकार रखें:

<!--[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">

सिर्फ इसलिए कि बूटस्ट्रैप साइट के पास यही है।

— जाइल्स रॉबर्ट्स
स्रोत
मैं उपयोग कर रहा हूं: <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 में उत्तरदायी नहीं है
— होज़िन अकाजानी
14

मेरे मामले में, बूटस्ट्रैप मिनिस्टर्ड CSS समस्या का कारण बन रहा था। IE8 में बूटस्ट्रैप 3.0.2 को उत्तरदायी बनाने के लिए (F12 डेवलपर टूल्स का उपयोग करके) मुझे निम्न करना था:

1 - X-UA- संगत ध्वज सेट करें।

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

2 - bootstrap.min.css के बजाय गैर-मिनिफ़ाइड बूटस्ट्रैप.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
स्रोत
मेरे मामले में भी, बूटस्ट्रैप मिनिस्टर्ड 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 में उत्तरदायी नहीं है
— होज़िन अकाजानी
6

डाल respond.jsपृष्ठ के तल पर लेकिन बंद करने से पहले bodyटैग और यहाँ की कड़ी है respond.jsऔर अपने स्थानीय होस्ट में इस कोड को चलाते हैं।

https://github.com/scottjehl/Respond

— जिग्नेश खेनी
स्रोत
इसके लिए धन्यवाद, हालांकि उल्लेख करना भूल गया, यह पहले से ही मेरे plugins.js फ़ाइल में शामिल है।
— रेवोन
महत्वपूर्ण बात यह है कि स्टाइलशीट के बादrespond.js लोड किया जाना चाहिए ।
— piotr_cz
6

शायद ज़रुरत पड़े। सुनिश्चित करें कि आप अपनी सीएसएस फ़ाइलों को लोड करने के बाद IE विशिष्ट js फ़ाइलों को लोड करते हैं।

— TenJack
स्रोत
5

जैसा कि पहले कहा गया है कि दो अलग-अलग समस्याएं हैं: 1) IE8 मीडिया प्रश्नों का समर्थन नहीं करता है 2) response.js क्रॉस-डोमेन css फ़ाइलों के साथ संयोजन के रूप में उपयोग किया जाता है जैसा कि पहले वर्णित है।

यदि आप यहां बूटस्ट्रैपसीडीएन का उपयोग करना चाहते हैं, तो एक काम का उदाहरण है:

<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]-->

स्थानीय निर्देशिकाओं में response.proxy.gif, response.min.js और response.proxy.js को कॉपी करना न भूलें

— माटेओ रोसी
स्रोत
4

सत्यापित करने के बाद:

  • DOCTYPE
  • एक्स-यूए-संगत मेटा टैग
  • Html5shiv.js और response.js का समावेश (और नवीनतम संस्करण डाउनलोड करना)
  • response.js स्थानीय हो रहा है
  • वेब सर्वर से होस्टिंग साइट और फ़ाइल से नहीं: //
  • @Import का उपयोग नहीं कर रहा है
  • ...

अभी भी col-lg, col-md और col-sm काम नहीं कर रहे थे। अंत में मैंने 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>
— जेम्स क्लाइमर
स्रोत
2
चल रहा है bootstrap.min.cs के रूप में यहाँ सलाह दी मेरी समस्या को हल करने के लिए आवश्यक था। मैंने केवल .css फ़ाइल को स्थानांतरित किया है, .js फ़ाइल अभी भी बाद में लोड होती है।
— चाड मैकग्राथ
Html5shim के ऊपर मेरी संकलित सीएसएस फ़ाइल (बूटस्ट्रैप सहित) ले जाना और उत्तर देना मेरे लिए समाधान था - धन्यवाद
— अनुकूल कोड
2

स्पष्टीकरण से यह कहता है कि IE8 आपके लिए मानक संस्करण है और content="IE=edge"पेज को उच्चतम मोड में प्रदान करेगा। संगत करने के लिए इसे बदलने के लिए content="IE=8"।

IE8 मोड W3C कैस्केडिंग स्टाइल शीट्स लेवल 2.1 स्पेसिफिकेशन और W3C सिलेक्टर्स API सहित कई स्थापित मानकों का समर्थन करता है; यह W3C कैस्केडिंग स्टाइल शीट्स लेवल 3 स्पेसिफिकेशन (वर्किंग ड्राफ्ट) और अन्य उभरते मानकों के लिए सीमित समर्थन भी प्रदान करता है।

एज मोड इंटरनेट एक्सप्लोरर को उपलब्ध उच्चतम मोड में सामग्री प्रदर्शित करने के लिए कहता है। इंटरनेट एक्सप्लोरर 9 के साथ, यह IE9 मोड के बराबर है। यदि इंटरनेट एक्सप्लोरर के भविष्य के रिलीज ने एक उच्च संगतता मोड का समर्थन किया, तो एज मोड पर सेट किए गए पृष्ठ उस संस्करण द्वारा समर्थित उच्चतम मोड में दिखाई देंगे। इंटरनेट एक्सप्लोरर 9 के साथ देखे जाने पर वही पृष्ठ अभी भी IE9 मोड में दिखाई देंगे।

संदर्भ क्या है <मेटा http-equiv = "X-UA- संगत" सामग्री = "IE = एज"> करते हैं?

— Dextere
स्रोत
1

जोड़ने की आवश्यकता - <meta http-equiv="X-UA-Compatible" content="IE=edge">

मैं बूटस्ट्रैप 3 का उपयोग कर रहा था - यह मेरे स्थानीय पर IE पर काम कर रहा था।

मैं इसे रहते IE में काम नहीं किया डाल दिया।

बस बूटस्ट्रैप उनके टेम्प्लेट में कोड की उस पंक्ति को शामिल नहीं करता है, मुझे यकीन नहीं है कि ऐसा क्यों हो सकता है लेकिन यह W3C के संगत नहीं होने के कारण हो सकता है।

— Getsomepeaches
स्रोत
1

मैं इस मुद्दे के लिए एक तय है। वास्तव में IE7 और 8 नॉट @ मीडिया का ठीक से समर्थन करते हैं और यदि आप "col-md- *" कक्षाओं के लिए सीएसएस की जांच करते हैं और मीडिया चौड़ाई 992px में चौड़ाई दी जाती है। बस एक नई सीएसएस फ़ाइल बनाएं IE उदाहरण: IE.css और सशर्त टिप्पणियों में जोड़ें। और फिर अपने डिजाइन के लिए आवश्यक कक्षाओं को सीधे वहां किसी भी मीडिया प्रश्न के साथ कॉपी करें और आप कर रहे हैं।

— डेनिस
स्रोत
0

बूटस्ट्रैप 2 से v3 की ओर जाते समय मुझे ठीक वैसी ही समस्या हुई।

यदि (मेरी तरह) आप पुराने स्पैनएक्स को कोल-एसएम-एक्स के साथ बदलकर माइग्रेट करते हैं, तो आपको कोल-एक्स कक्षाएं जोड़ने की आवश्यकता है। col-X वे शैलियाँ हैं जो किसी भी @मीडिया ब्लॉक के बाहर हैं, इसलिए वे मीडिया क्वेरी समर्थन के बिना काम करती हैं।

कंटेनर की चौड़ाई को ठीक करने के लिए आप इसे खुद एक @मीडिया ब्लॉक के बाहर सेट कर सकते हैं। कुछ इस तरह:

.container {
  max-width: @container-tablet;
}
@import "twitter-bootstrap/less/bootstrap";
— andyberry88
स्रोत
ठीक है, इसलिए पता चला है कि 100% समस्या को हल नहीं करता है क्योंकि कॉल-एक्स कक्षाएं फिर मोबाइल उपकरणों के लिए उपयोग की जाती हैं। ड्राइंग बोर्ड पर वापस ...
— andyberry88
कोल-एक्स कक्षाएं कभी भी ढेर नहीं होंगी, इसलिए आपको समाधान छोटे उपकरणों पर समस्या होगी। आप समाधान भी @ ग्रिड-फ्लोट-ब्रेकप्वाइंट के साथ समस्याओं को ठीक नहीं करते हैं जो कि मीडिया के प्रश्नों पर भी निर्भर करता है ताकि आपके नावबार क्षैतिज न बनें। इन्हें भी देखें: stackoverflow.com/a/17920693/1596547
— बास जॉन्सन
0

मैं IE 10.0 में एक ही समस्या ग्रस्त हूँ। मुझे पता है कि यह ओपी में बिल्कुल समस्या नहीं है, लेकिन शायद यह दूसरों के लिए उपयोगी होगा।

मेरे मामले में, दस्तावेज़ की शुरुआत में मेरे पास एक खाली लाइन थी:

[blank line]
<!DOCTYPE html>
<html lang="es">
...

यदि रिक्त रेखा DOCTYPE और टैग के बीच है, तो समस्या को भी दिखाया गया है:

<!DOCTYPE html>
[blank line]
<html lang="es">

एक बार जब मैंने रिक्त लाइन को हटा दिया है, और जादू एक्स-यूए-संगत मेटा के बिना, IE 10 ने साइट को सही ढंग से प्रस्तुत करना शुरू कर दिया है।

यदि आप PHP और होशियार का उपयोग कर रहे हैं तो अपने स्मार्ट टिप्पणियों के साथ सावधान रहें क्योंकि वे उन समस्याग्रस्त रिक्त लाइनों को जोड़ देंगे :-)

— 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>

यदि आप स्थानीय में प्रयास करना चाहते हैं ... स्थानीयहोस्ट के माध्यम से प्रयास करें, या एक QA सर्वर बनाएं और सामग्री सेट करें और प्रयास करें।

हमें बूटस्ट्रैप 3 के लिए response.js की आवश्यकता है और यह स्थानीय मशीन में काम नहीं करेगा यदि हम इसे js में डालते हैं और इसे हेडर में html में जोड़ते हैं। इसे कहेंगे पहुँच से वंचित। यह केवल सर्वर के माध्यम से काम करता है क्योंकि IE में सुरक्षा प्रतिबंध है। : पी

— sandeepnpn
स्रोत
0

मैंने यहां हर टिप्पणी पढ़ी है, सब कुछ करने की कोशिश की है .. लेकिन इसे विंडोज 7 के साथ काम करने के लिए नहीं मिला - इंटरनेट एक्सप्लोरर 11 ( दस्तावेज़ मोड के साथ: IE8 )।

तब यह ध्यान में आया कि डॉक्यूमेंट मोड (IE8) को चलाना असली IE8 के समान नहीं है, इसलिए मैंने विंडोज वर्चुअल पीसी ( इंटरनेट एक्सप्लोरर 8 के साथ विंडोज 7 ) और टाडाए ... को काम में लिया। एक आकर्षण की तरह !

मैंने काम करने के लिए पृष्ठ के नीचे केवल कोड का यह टुकड़ा डाला है:

<!-- 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 । मैं पूरी के bootstrap.min.cssमाध्यम @importसे अपने में आयातित थाmain.css ।

इसलिए सुनिश्चित करें कि आपके पास ऐसा कोई भी CSS नहीं है जिसमें @import के माध्यम से आपके मीडिया प्रश्नों को संदर्भित किया गया हो ।

— एलेक्स सत्तू
स्रोत
0

मैंने नीचे के चरणों को हल किया है।

(1) ड्रूपल के लिए रेस्पोंड.जेएस मॉड्यूल स्थापित किया है। (2) ड्रूपल 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]-->

थीम सेटिंग से सीडीएन बूटस्ट्रैप का उपयोग करना।

अधिक जानने के लिए, ड्रुपल डिज़ाइन और विकास के लिए मेरे वेबसाइट ब्लॉग की समीक्षा करें www.devangsolanki.com

— user3471193
स्रोत
1
प्रश्न से संबंधित चरण 1 और 2 भी कैसे हैं? मुद्दा IE8 और बूटस्ट्रैप के साथ है। प्रश्न में द्रुपाल का उल्लेख भी नहीं किया गया है।
— एडम ज़करमैन
0

यदि आप बूटस्ट्रैप 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
स्रोत
हाय फिल हीली, जो समाधान मैंने पोस्ट किया वह मेरे लिए काम किया। आपकी टिप्पणी रचनात्मक नहीं है। यदि आप मदद चाहते हैं तो आपको अधिक विवरण प्रदान करना होगा
— vutbao
1
@vutbao बूटस्ट्रैप संस्करणों पर काम करता है> IE8। यदि आप इसे IE8 में काम करना चाहते हैं, तो आपको बूटस्ट्रैप CDN का उपयोग करने पर प्रतिक्रियाएँ जोड़ने की आवश्यकता होगी, लेकिन जब तक आप बूटस्ट्रैप CDN का उपयोग नहीं कर रहे हैं, तब वह काम नहीं करेगा। बास जॉब्स का जवाब पढ़ने के लिए समय निकालें।
— विचित्र
@Vutbao, यह कहने के लिए कि आपका उत्तर इस प्रकृति के सभी बूटस्ट्रैप 3 मुद्दों का निश्चित उत्तर है, सही नहीं है। फिर भी, आपका जवाब यही है। जैसा कि baaaaaaa इंगित करता है कि विचार करने के लिए कई मुद्दे हैं। उदाहरण के लिए एक और मुद्दा यह हो सकता है कि दस्तावेज़ quirks मोड में है, आदि
— फिल हीली
मुद्दा लेना। मैं शब्दांकन से अधिक सावधान रहूंगा। धन्यवाद
— 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 डाउनलोड करने के लिए लिंक । बूटस्ट्रैप-ie7.css डाउनलोड करने के लिए लिंक

— Ac1d
स्रोत
0

सुनिश्चित करें कि आप बूटस्ट्रैप स्रोत को अलग से लिंक करते हैं

यदि आप शैलियों का संकलन करने के साथ लालच करते हैं LESSया SASSनहीं करते हैं। मेरे प्रोजेक्ट में मैंने bootstrap.min.cssअपनी मुख्य शैली में, फ़ाइल के शीर्ष पर शामिल किया है - इसलिए सभी शैलियों के लिए केवल एक अनुरोध होना चाहिए।

और उस वजह से, बूस्टर क्लास ठीक से काम नहीं करते थे। जब अलग से जोड़ा जाता है, तो उम्मीद के मुताबिक काम करता है।

— Atais
स्रोत
0

मैंने उसी समस्या का सामना किया, पहले उत्तर की कोशिश की लेकिन कुछ गायब था।

यदि आप लोग वेबपैक का उपयोग कर रहे हैं, तो आपकी सीएसएस को एक स्टाइल टैग के रूप में लोड किया जाएगा, जो प्रतिक्रिया द्वारा समर्थित नहीं है। जेएस, इसे एक फ़ाइल की आवश्यकता है, इसलिए सुनिश्चित करें कि बूटस्ट्रैप एक सीएसएस फ़ाइल के रूप में लोड किया गया है

व्यक्तिगत रूप से मैंने उपयोग किया 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")
            }
        ]
    }
}

आशा है इससे आपकी मदद होगी

— सामी ट्राई
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.