[html] مشكلة IE8 مع التغريد Bootstrap 3


Answers

واضطررت أيضًا إلى إعداد علامة META التالية:

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

أقوم بإنشاء موقع باستخدام Twitter Bootstrap جديد. يبدو الموقع جيدًا ويعمل في جميع المتصفحات المطلوبة باستثناء IE8.

في IE8 يبدو أنه يعرض عناصر من النسخة المحمولة ولكن امتدت عبر الشاشة الكاملة لسطح المكتب. أعتقد أن المشكلة التي أواجهها هي أن برنامج 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>



يلزم إضافة - <meta http-equiv="X-UA-Compatible" content="IE=edge">

كنت باستخدام Bootstrap 3 - كان يعمل على IE على بلدي المحلية.

أنا وضعت على الهواء مباشرة لم يعمل في IE.

لا يتضمن Just Bootstrap هذا السطر من التعليمة البرمجية في القوالب الخاصة بهم ، ولست متأكدًا من السبب ، ولكن قد يكون ذلك بسبب عدم توافقه مع W3C.




في حالتي ، تباطأ Bootstrap 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]-->



لقد حلت أدناه الخطوات.

(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




استخدم هذا الحل

<!--[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" /> تمكين خطوط <link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" /> التشغيل.

اختبارها على Bootstrap 3.3.5

رابط لتحميل mediaqieries.js . رابط لتحميل bootstrap-ie7.css




لقد عانيت من نفس المشكلة في IE 10.0. أعلم أن هذه ليست المشكلة بالضبط في سياسة العمليات ، ولكن ربما ستكون مفيدة للآخرين.

في حالتي ، كان لدي سطر فارغ في بداية المستند:

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

إذا كان السطر الفارغ بين DOCTYPE والعلامة ، تظهر المشكلة أيضًا:

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

بعد إزالة السطر الفارغ ، وبدون استخدام Xa-UA-meta السحري ، بدأ IE 10 في عرض الموقع بشكل صحيح.

إذا كنت تستخدم PHP و Smarty كن حذرا مع تعليقات Smarty الخاصة بك لأنها سوف تضيف تلك الخطوط الفارغة التي تسبب مشاكل :-)




واجهت نفس المشكلة ، وحاولت الإجابة الأولى ولكن هناك شيء مفقود.

إذا كنت تستخدم برنامج 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")
            }
        ]
    }
}

أتمنى أنها تساعدك




لقد قرأت كل تعليق هنا ، وحاولت كل شيء .. ولكن لم أستطع الحصول عليه للعمل مع Windows 7 - Internet Explorer 11 ( مع وضع المستند: IE8 ).

ثم يتبادر إلى الذهن أن تشغيل وضع المستند (IE8) ليس هو نفس IE8 الحقيقي ، لذلك قمت بتثبيت Windows Virtual PC ( Windows 7 مع Internet Explorer 8 ) و tadaaaa ... فهو يعمل مثل السحر!

لقد وضعت هذا الجزء من رمز 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>



لدي حل لهذه المشكلة. في الواقع لا يدعم IE7 و 8media بشكل صحيح ، وإذا قمت بفحص css للفئات "col-md- *" وهناك عرض معين في عرض الوسائط 992px. فقط قم بإنشاء ملف css جديد على سبيل المثال: IE.css وأضفه في التعليقات الشرطية. ثم قم بنسخ الفصول الدراسية المطلوبة للتصميم الخاص بك مباشرة مع أي استعلامات الوسائط هناك وانت القيام به.




كما ذكر سابقاً ، هناك مشكلتان مختلفتان: 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="//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 في الدلائل المحلية




فقط في حالة. تأكد من تحميل ملفات IE المحددة بعد تحميل ملفات css الخاصة بك.




Related