টুইটার বুটস্ট্র্যাপ 3 আইই 8 ইস্যু

228

আমি নতুন টুইটার বুটস্ট্র্যাপ ব্যবহার করে একটি সাইট তৈরি করছি। সাইটটি দুর্দান্ত দেখাচ্ছে এবং IE8 ব্যতীত অন্যান্য প্রয়োজনীয় ব্রাউজারগুলিতে কাজ করে।

আইই 8-তে এটি মোবাইল সংস্করণের উপাদানগুলি প্রদর্শিত হচ্ছে বলে মনে হচ্ছে তবে আমার ডেস্কটপের পুরো স্ক্রিনে প্রসারিত। আমি বিশ্বাস করি যে আমার যে সমস্যা হচ্ছে তা হ'ল টুইটার বুটস্ট্র্যাপটি প্রথমে মোবাইল। তাই কোনও কারণে আই 8 এই বিকল্পটির জন্য যাচ্ছে।

আমি আরও লক্ষ্য করেছি যে 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

আপনি সিডিএন থেকে আপনার সিএসএস পেয়েছেন (বুটস্ট্র্যাপসিডিএন.কম) প্রতিক্রিয়া.js কেবল স্থানীয় ফাইলের জন্য কাজ করে। সুতরাং বুটস্ট্র্যাপ সিএসএসের স্থানীয় অনুলিপি সহ আপনার ওয়েবসাইটটি IE8 এ চেষ্টা করুন। বা পড়ুন: সিডিএন / এক্স-ডোমেন সেটআপ

দ্রষ্টব্য এছাড়াও দেখুন: https://github.com/scottjehl/Respond/pull/206

হালনাগাদ:

দয়া করে পড়ুন: http://getbootstrap.com/getting-started/#support

এছাড়াও, ইন্টারনেট এক্সপ্লোরার 8 এর জন্য মিডিয়া ক্যোয়ারী সমর্থন সক্ষম করতে সাপ্লাই.জেএস এর ব্যবহার প্রয়োজন।

আরও দেখুন: 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??
— ক্রিস কেম্পেন 11
6
দুঃখিত, আমি সবসময় হাস্যকর প্রশ্ন পোস্ট করার পরে যথাযথ সমাধান খুঁজে পেয়েছি বলে মনে করি ... getbootstrap.com/getting-started (বিশেষত "ইন্টারনেট এক্সপ্লোরার 8 এবং 9" বিভাগের অধীনে) দেখুন। :)
— ক্রিস কেম্পেন 11
1
স্থানীয়ভাবে কোন ফাইল থাকতে হবে, কোনটি সিডিএন থেকে ব্যবহার করা যেতে পারে? বুটস্রেপসিএসএস, বুটস্ট্র্যাপ.জেএস, রেসপন্স.জেএস, এইচটিএমএল 5 শিব.জেএস ফাইল?
— trante
3
স্থানীয় রেসপন্স.জেএস কেবল বুটস্ট্র্যাপের স্থানীয় অনুলিপি (একই ডোমেন) নিয়ে কাজ করে, এখানে github.com/scottjehl/Respond#cdnx-domain-setup দেখুন
— বাস জোবসেন
6
এছাড়াও মনে রাখবেন যে মিডিয়া কোয়েরিগুলি থাকা CSS ফাইলের পরে রেসপন্ড.জেএস সংজ্ঞায়িত করা দরকার contains অন্যথায়, তাদের 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; } তবে এটি
— আইই
17

বুটস্ট্র্যাপ 2 থেকে 3 এ স্থানান্তরের সময় আমার একই সমস্যা ছিল আমি ইতিমধ্যে রেসপন্স.জে এবং 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; } তবে এটি
— আইই
14

আমার ক্ষেত্রে, বুটস্ট্র্যাপ মিনিফাইড সিএসএস সমস্যার কারণ ছিল। আইই 8-তে বুটস্ট্র্যাপ 3.0.০.২ প্রতিক্রিয়াশীল করতে (F12 বিকাশকারী সরঞ্জাম ব্যবহার করে অনুকরণ করা) আমাকে করতে হয়েছিল:

1 - এক্স-ইউএ-সামঞ্জস্যপূর্ণ পতাকা সেট করুন।

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

2 - বুটস্ট্র্যাপ.মিন সিএসএসের পরিবর্তে নন-মিনিফাইড বুটস্ট্র্যাপ সিএসএস ব্যবহার করুন

<link href="/css/bootstrap.css" rel="stylesheet" />

3 - প্রতিক্রিয়া.জেগুলি যুক্ত করুন (এবং html5shiv.js)

<!--[if lt IE 9]>
  <script src="/js/html5shiv.min.js"></script>
  <script src="/js/respond.min.js"></script>
<![endif]-->
— pedrusky
সূত্র
আমার ক্ষেত্রেও, বুটস্ট্র্যাপ মিনিফাইন্ড সিএসএস আইই 8-তে সমস্যা সৃষ্টি করছে।
— 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; } তবে এটি
— আইই
6

করা respond.jsপৃষ্ঠার নীচের অংশে অবস্থিত কিন্তু বন্ধ করার আগে bodyট্যাগ এবং এখান থেকে লিঙ্ক respond.jsএবং আপনার স্থানীয় হোস্ট এই কোড রান।

https://github.com/scottjehl/Respond

— জিগনেশ খেনি
সূত্র
এর জন্য ধন্যবাদ, যদিও উল্লেখ করতে ভুলে গেছেন, এটি আমার প্লাগইনস.জেএস ফাইলের মধ্যে ইতিমধ্যে অন্তর্ভুক্ত রয়েছে।
— wrayvon
গুরুত্বপূর্ণ বিষয়টি হ'ল স্টাইলশিটের পরেrespond.js লোড করা উচিত ।
— piotr_cz
6

শুধু ক্ষেত্রে। আপনার সিএসএস ফাইলগুলি লোড করার পরে আপনি IE নির্দিষ্ট জেএস ফাইলগুলি লোড করেছেন তা নিশ্চিত করুন।

— TenJack
সূত্র
5

আগেই বলা আছে দুটি পৃথক সমস্যা রয়েছে: 1) আইই 8 মিডিয়া প্রশ্নগুলি সমর্থন করে না 2) প্রতিক্রিয়া.জে ক্রস-ডোমেন সিএসএস ফাইলগুলির সাথে একত্রে ব্যবহৃত হিসাবে অবশ্যই পূর্বের বর্ণিত হিসাবে অন্তর্ভুক্ত করা উচিত।

আপনি যদি বুটস্ট্র্যাপসিডিএন ব্যবহার করতে চান তবে এখানে একটি কার্যকারী উদাহরণ রয়েছে:

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

স্থানীয় ডিরেক্টরিতে প্রতিক্রিয়া.প্রক্সি.gif, প্রতিক্রিয়া.মিন.জেএস এবং প্রতিক্রিয়া.প্রক্সি.জেগুলি অনুলিপি করতে ভুলবেন না

— মাত্তিও রসি
সূত্র
4

যাচাই করার পরে:

  • DOCTYPE
  • এক্স-ইউএ-সামঞ্জস্যপূর্ণ মেটা ট্যাগ
  • Html5shiv.js এবং প্রতিক্রিয়া.জেএস এর অন্তর্ভুক্তি (এবং সর্বশেষতম সংস্করণগুলি ডাউনলোড করা)
  • প্রতিক্রিয়া.js স্থানীয় হচ্ছে
  • ওয়েব সার্ভার থেকে হোস্টিং সাইট এবং ফাইল থেকে নয়: //
  • @ ইম্পোর্ট ব্যবহার করছেন না
  • ...

এখনও কল-এলজি, কর্ন-এমডি, এবং কর্ন-এসএম কাজ করছে না। অবশেষে বুটস্ট্র্যাপে রেফারেন্সগুলি html5shiv.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
এখানে পরামর্শ হিসাবে বুটস্ট্র্যাপ.মিন.সিএসএস সরানো আমার সমস্যা সমাধানের জন্য প্রয়োজনীয় ছিল। আমি কেবল .css ফাইলটি সরিয়েছি, .js এখনও ফাইল করে পরে লোড হয়।
— চাদ ম্যাকগ্রা
এইচটিএমএল 5 শিমের উপরে আমার সংকলিত সিএসএস ফাইল (বুটস্ট্র্যাপ সহ) সরানো এবং প্রতিক্রিয়া আমার জন্য সমাধান ছিল - ধন্যবাদ
— বন্ধুত্বপূর্ণ কোড
2

ব্যাখ্যা থেকে বলা হয়েছে যে আইই 8 আপনার জন্য মানক সংস্করণ এবং তৈরিটি content="IE=edge"পৃষ্ঠাকে সর্বোচ্চ মোডে রেন্ডার করবে। এটিকে সামঞ্জস্যপূর্ণ করতে এটিতে পরিবর্তন করুন content="IE=8"।

আইই 8 মোড ডাব্লু 3 সি ক্যাসকেডিং স্টাইল শিটস লেভেল 2.1 স্পেসিফিকেশন এবং ডাব্লু 3 সি সিলেক্টর এপিআই সহ অনেক প্রতিষ্ঠিত মানকে সমর্থন করে; এটি ডাব্লু 3 সি ক্যাসকেডিং স্টাইল শীট স্তর 3 স্পেসিফিকেশন (ওয়ার্কিং ড্রাফ্ট) এবং অন্যান্য উদীয়মান স্ট্যান্ডার্ডগুলির জন্যও সীমিত সমর্থন সরবরাহ করে।

এজ মোড ইন্টারনেট এক্সপ্লোরারকে সর্বাধিক উপলব্ধ মোডে সামগ্রী প্রদর্শন করতে বলে। ইন্টারনেট এক্সপ্লোরার 9 এর সাথে এটি আই 9 মোডের সমতুল্য। যদি ইন্টারনেট এক্সপ্লোরারের ভবিষ্যতের প্রকাশটি একটি উচ্চতর সামঞ্জস্যতা মোডকে সমর্থন করে তবে প্রান্ত মোডে সেট করা পৃষ্ঠাগুলি সেই সংস্করণ দ্বারা সমর্থিত সর্বোচ্চ মোডে উপস্থিত হবে। ইন্টারনেট এক্সপ্লোরার 9 এর সাথে দেখা হলে সেই একই পৃষ্ঠাগুলি তখনও আই 99 মোডে উপস্থিত হবে।

রেফারেন্স <মেটা http-برابر = "এক্স-ইউএ-সামঞ্জস্যপূর্ণ" সামগ্রী = "আইই = প্রান্ত"> কী করে?

— Dextere
সূত্র
1

যোগ করার প্রয়োজন - <meta http-equiv="X-UA-Compatible" content="IE=edge">

আমি বুটস্ট্র্যাপ 3 ব্যবহার করছিলাম - এটি আমার স্থানীয়তে আইইতে কাজ করে।

আমি এটি লাইভ রেখেছি IE এ কাজ করে না।

কেবল বুটস্ট্র্যাপ তাদের টেম্পলেটগুলিতে সেই লাইন কোডটিকে অন্তর্ভুক্ত করে না, তবে আমি নিশ্চিত নই তবে এটি W3C সামঞ্জস্যপূর্ণ না হওয়ার কারণে এটি হতে পারে।

— Getsomepeaches
সূত্র
1

এই সমস্যাটির জন্য আমার একটি সমাধান আছে। আসলে আই 7 এবং 8 টি মিডিয়া যথাযথভাবে সমর্থন করে না এবং যদি আপনি "কল-এমডি- *" ক্লাসগুলির জন্য সিএসএস পরীক্ষা করে থাকেন এবং সেখানে মিডিয়া প্রস্থ 992px প্রস্থ দেওয়া হয়। কেবলমাত্র একটি নতুন সিএসএস ফাইল তৈরি করুন IE উদাহরণস্বরূপ: আই সি এস এস এবং শর্তযুক্ত মন্তব্যগুলিতে যুক্ত করুন। এবং তারপরে আপনার ডিজাইনের জন্য প্রয়োজনীয় ক্লাসগুলি কেবল কোনও মিডিয়া প্রশ্নের সাথে সরাসরি অনুলিপি করুন এবং আপনার কাজ শেষ হয়েছে।

— ডেনিস
সূত্র
0

বুটস্ট্র্যাপভি 2 থেকে ভি 3 এ স্থানান্তর করার সময় আমার ঠিক একই সমস্যা ছিল।

যদি (আমার মতো) আপনি পুরানো স্প্যানেক্সকে কোল-এসএম-এক্স দিয়ে প্রতিস্থাপন করে স্থানান্তরিত হয়েছিলেন তবে আপনারও কোল-এক্স ক্লাস যুক্ত করতে হবে। কল-এক্স এমন স্টাইলগুলি যা কোনও @ মিডিয়া ব্লকের বাইরে থাকে তাই তারা মিডিয়া ক্যোয়ারী সমর্থন ছাড়াই কাজ করে।

ধারক প্রস্থ ঠিক করতে আপনি এটি @ মিডিয়া ব্লকের বাইরে নিজেকে সেট করতে পারেন। কিছুটা এইরকম:

.container {
  max-width: @container-tablet;
}
@import "twitter-bootstrap/less/bootstrap";
— andyberry88
সূত্র
ঠিক আছে, তাই খুঁজে পেয়েছি যে কোল-এক্স ক্লাসগুলি মোবাইল ডিভাইসগুলির জন্য ব্যবহৃত হয় সেহেতু 100% সমস্যার সমাধান করে না। অঙ্কন বোর্ড ফিরে ...
— andyberry88
কর্নেল-এক্স ক্লাস কখনই স্ট্যাক করবে না, তাই আপনার সমাধানটি ছোট ডিভাইসে সমস্যা দেখাবে। আপনি @ গ্রিড-ফ্ল্যাট-ব্রেকপয়েন্টের সাথে সমস্যার সমাধানও করেন না যা মিডিয়া প্রশ্নের উপরও নির্ভর করে যাতে আপনার নাবারটি অনুভূমিক না হয়ে যায়। আরও দেখুন: stackoverflow.com/a/17920693/1596547
— বাস Jobsen
0

আইই 10.0 এ আমি একই সমস্যায় পড়েছি। আমি জানি ওপিতে এটি ঠিক সমস্যা নয়, তবে এটি অন্যদের জন্য উপকারী হবে।

আমার ক্ষেত্রে, নথির শুরুতে আমার একটি খালি লাইন ছিল:

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

যদি ফাঁকা লাইনটি ডক্টইপিইপি এবং ট্যাগের মধ্যে থাকে তবে সমস্যাটিও প্রদর্শিত হয়:

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

একবার আমি ফাঁকা রেখাটি সরিয়ে ফেলেছি, এবং যাদুবিহীন এক্স-ইউএ-সামঞ্জস্যপূর্ণ মেটা ছাড়াই, আইই 10 সঠিকভাবে সাইটটি রেন্ডার করতে শুরু করেছে।

আপনি যদি পিএইচপি এবং স্মার্ট ব্যবহার করছেন তবে আপনার স্মার্ট মন্তব্যে সতর্ক থাকুন কারণ তারা সেই সমস্যাযুক্ত ফাঁকা লাইন যুক্ত করবে :-)

— 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 এর জন্য রেসপন্স.জেএস দরকার এবং এটি স্থানীয় মেশিনে কাজ করবে না যদি আমরা এটি কেবল জেএসে রাখি এবং এটি হেডারে এইচটিএমএল এ যুক্ত করি। এটি অ্যাক্সেস অস্বীকার বলবে। এটি কেবল সার্ভারের মাধ্যমেই কাজ করে কারণ আইই এর সুরক্ষা বিধিনিষেধ আছে। : P: P

— sandeepnpn
সূত্র
0

আমি এখানে প্রতিটি মন্তব্য পড়েছি, সবকিছু চেষ্টা করেছি .. তবে এটি উইন্ডোজ 7 - ইন্টারনেট এক্সপ্লোরার 11 ( ডকুমেন্ট মোড সহ: আই 8 ) এর সাথে কাজ করতে পারিনি ) এর ।

তখন মনে পড়ে গেল যে ডকুমেন্ট মোড (আইই 8) চালানো আসল আইই 8 এর মতো নয়, তাই আমি উইন্ডোজ ভার্চুয়াল পিসি ইনস্টল করেছি ( উইন্ডোজ Internet ইন্টারনেট এক্সপ্লোরার ৮ সহ ) এবং টডআআআআ ... এটি একটি মোহন মতো কাজ করে !

আমি কোডটির এই টুকরোটি JUST পৃষ্ঠার নীচে রেখেছি যাতে এটি কার্যকর হয়:

<!-- 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
সূত্র
রেসপন্ড.জেএস এবং প্রক্সি ফাইলগুলি সিডিএনজেএস.সি.এলউডফ্লেয়ার.কম এও হোস্ট করা হয়। খুঁজে বার করো cdnjs.com/libraries/respond.js ডক্স / লিঙ্কের জন্য, এবং বুটস্ট্র্যাপ 3.03 সেখানে হোস্ট করা হয়: cdnjs.com/libraries/twitter-bootstrap
— ট্রয় Morehouse
0

ঠিক যেমন একটি মাথা উপরে। আমার একই সমস্যা ছিল এবং উপরের কোনওটিই আমার জন্য এটি ঠিক করে নি। অবশেষে আমি বুঝতে পারলাম যে respond.js পার্স সিএসএস মাধ্যমে রেফারেন্সড না @import । আমার bootstrap.min.cssমাধ্যমে পুরো আমদানি করা @importহয়েছিল main.css।

সুতরাং নিশ্চিত হয়ে নিন যে আপনার কাছে এমন কোনও সিএসএস নেই যা আপনার মিডিয়া কোয়েরিগুলিকে @ ইম্পোর্টের মাধ্যমে রেফারেন্স করে ।

— অ্যালেক্স সুতু
সূত্র
0

আমি নীচের পদক্ষেপগুলি সমাধান করেছি।

(1) ড্রুপাল for এর জন্য রেসপন্ড.জেএস মডিউল ইনস্টল করা হয়েছে (২) লাইব্রেরিতে ড্রুপাল set সেট এর জন্য লেয়ারফ্যাপ মডিউল, মডিউল ফোল্ডারের পরিবর্তে। (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 পদক্ষেপটি প্রশ্নের সাথে সম্পর্কিত? ইস্যুটি আইই 8 এবং বুটস্ট্র্যাপ নিয়ে। এমনকি প্রশ্নটিতে দ্রুপালও উল্লেখ করা হয়নি।
— অ্যাডাম জুকারম্যান
0

আপনি যদি বুটস্ট্র্যাপ 3 ব্যবহার করেন এবং আইই ব্যতীত অন্য ব্রাউজারগুলিতে সবকিছু ঠিকঠাক কাজ করে তবে নীচের চেষ্টা করুন।

<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
@ ভুটবাও বুটস্ট্র্যাপ সংস্করণ> আইই 8 এ কাজ করে। আপনি যদি এটি IE8 এ কাজ করতে চান তবে আপনার প্রতিক্রিয়া যুক্ত করতে হবে তবে আপনি বুটস্ট্র্যাপ সিডিএন ব্যবহার করছেন তবে পুনরায় প্রতিক্রিয়া করা উচিত নয়। বাস জবসনের উত্তর পড়তে সময় নিন।
— উইকেক্স
@ বাটবাও, আপনার উত্তরটি হ'ল এই প্রকৃতির সমস্ত বুটস্ট্র্যাপ 3 ইস্যুর যথাযথ উত্তর সঠিক নয়। তবুও, আপনার উত্তরটি এটাই বলে। যেমন bwaaaaaa ইঙ্গিত করে সেখানে অনেকগুলি বিষয় বিবেচনা করা উচিত। উদাহরণস্বরূপ অন্য একটি সমস্যা ডকুমেন্টটি কুইর্কস মোডে হতে পারে ইত্যাদি
— ফিল হেইলি
পয়েন্ট নেওয়া হয়েছে। আমি শব্দটি আরও যত্নবান হতে হবে। ধন্যবাদ
— ভুটবাও
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 এ পরীক্ষিত

মিডিয়াকিয়ার্স.জেএস ডাউনলোড করার লিঙ্ক । বুটস্ট্র্যাপ- ie7.css ডাউনলোড করার লিঙ্ক

— Ac1d
সূত্র
0

আপনি পৃথকভাবে বুটস্ট্র্যাপ উত্সটি সংযুক্ত করেছেন তা নিশ্চিত করুন

আপনি যদি স্টাইলগুলি সংকলন করে লোভী হন না LESSবা ব্যবহার করেন SASSনা। আমার প্রকল্পে আমি bootstrap.min.cssআমার মূল শৈলীতে ফাইলের শীর্ষে অন্তর্ভুক্ত করেছি - সুতরাং সমস্ত শৈলীর জন্য কেবল একটি অনুরোধ থাকা উচিত।

এবং সে কারণে বুস্টারপ ক্লাসগুলি সঠিকভাবে কাজ করে নি। পৃথকভাবে যুক্ত করা হলে, প্রত্যাশার মতো কাজ করে।

— Atais
সূত্র
0

আমি একই সমস্যার মুখোমুখি হয়েছি, প্রথম উত্তরটি চেষ্টা করেছিলাম তবে কিছু অনুপস্থিত ছিল।

যদি আপনি ছেলেরা ওয়েবপ্যাক ব্যবহার করছেন তবে আপনার সিএসএস একটি স্টাইল ট্যাগ হিসাবে লোড করা হবে যা প্রতিক্রিয়া.জেএস দ্বারা সমর্থিত নয়, এটির জন্য একটি ফাইল প্রয়োজন, সুতরাং নিশ্চিত হয়ে নিন যে বুটস্ট্র্যাপটি CSS ফাইল হিসাবে লোড হয়েছে make

ব্যক্তিগতভাবে আমি ব্যবহার 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.