logo标签列表

IE8在使用Twitter Bootstrap 3时出现问题

htmlcsstwitter-bootstrapinternet-explorer-8twitter-bootstrap-3
229

我正在使用新的Twitter Bootstrap创建网站。该网站在所有必需的浏览器中看起来都很好，除了IE8。

在IE8中，它似乎显示移动版本的元素，但是拉伸到我的桌面屏幕的全屏幕上。我认为我遇到的问题是Twitter Bootstrap是移动优先的。因此，出于某种原因，IE8选择了这个选项。

我还注意到container类似乎没有像预期的那样引入max-width 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>
22个回答
260

您的CSS是从CDN（bootstrapcdn.com）获取的，而respond.js仅适用于本地文件。因此，请使用具有本地副本的bootstrap.css在IE8上尝试您的网站。或阅读：CDN/X-Domain设置

注意另请参见：https://github.com/scottjehl/Respond/pull/206

更新：

请阅读：http://getbootstrap.com/getting-started/#support

此外，Internet Explorer 8需要使用respond.js才能启用媒体查询支持。

另请参见：https://github.com/scottjehl/Respond

出于这个原因，基本模板在head部分包含以下行：

<!-- 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]-->
6
抱歉，我总是在发布荒谬的问题后才找到合适的解决方案……请查看http://getbootstrap.com/getting-started/（特别是在“Internet Explorer 8 and 9”部分）。 :) 注：原文已经是中英混杂，无需翻译成中文。 - Chris Kempen
1
哪些文件应该存在于本地，哪些可以从CDN使用？bootstrap.css、bootstrap.js、respond.js和html5shiv.js文件？ - trante
3
本地的respond.js仅适用于本地引用的bootstrap副本（同一域），请参见此处 https://github.com/scottjehl/Respond#cdnx-domain-setup。 - Bass Jobsen
需要明确的是，需要本地化的是您的Bootstrap CSS文件，而不是HTML5shiv或respond.js脚本。事实上，当我从GitHub下载这两个脚本并在本地运行时，IE8无法正常工作。一切都解决了，一旦我按照Bootstrap文档的方式从oss.maxcdn.com提供它们。 - technoTarek
6
请注意，Respond.js 需要在包含媒体查询的 CSS 文件之后定义，否则在 IE8 中它们将无法被处理。 - helios456
显示剩余4条评论
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时，我遇到了同样的问题。我已经得到了respond.js和html5shiv.js，并将我的meta设置为edge。但我错过了从2到3导航栏元素类型的更改。在Bootstrap 2中，它是nav，在Bootstrap 3中，它现在是header。所以要完全解决这个问题，我必须

<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 CSS导致了问题。为了使Bootstrap 3.0.2在使用F12开发人员工具模拟的IE8中响应式，我必须：

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 - 添加respond.js（和html5shiv.js）

<!--[if lt IE 9]>
  <script src="/js/html5shiv.min.js"></script>
  <script src="/js/respond.min.js"></script>
<![endif]-->
在我的情况下，Bootstrap压缩的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

以防万一，请确保在加载CSS文件后再加载IE特定的JavaScript文件。

6
谢谢您，不过我忘了提到，这已经包含在我的plugins.js文件中了。 - wrayvon
重要的是，respond.js 应该在样式表之后加载。 - piotr_cz
5

如先前所述，存在两个不同的问题： 1）IE8不支持媒体查询 2）使用跨域CSS文件时必须按照之前描述的方式包含respond.js。

如果您想使用BootstrapCDN，这是一个可行的示例：

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<!--[if lt IE 9]>
    <link href="//netdna.bootstrapcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
    <link href="img/ie/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
    <script src="js/ie/html5shiv.js"></script>
    <script src="js/ie/respond.min.js"></script>
    <script src="js/ie/respond.proxy.js"></script>
<![endif]-->

请确保在本地目录中复制respond.proxy.gif、respond.min.js和response.proxy.js。
5

别忘了将你的CSS链接放置在<head>中，因为respond.js只会处理那些。

4

验证后：

  • DOCTYPE
  • X-UA-Compatible元标记
  • 包括html5shiv.js和respond.js（并下载最新版本）
  • 确保respond.js本地存在
  • 从Web服务器而不是File://中托管网站
  • 不要使用@import
  • ...

仍然无法正常工作col-lg，col-md和col-sm。 最后我将对Bootstrap的引用移动到对html5shiv.js和respond.js的引用之前，然后一切正常。

这是一个片段：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Bootstrap Test for IE8</title>

    <!-- Moved these two lines up --> 
    <link href="includes/css/bootstrap.css" type="text/css" rel="stylesheet" />
    <script src="includes/js/bootstrap.js"></script>

    <!--[if lt IE 9]>
      <script src="includes/js/html5shiv.js"></script>
      <script src="includes/js/respond.min.js"></script>
    <![endif]-->    
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4" style="background-color:red;">col-md-4</div>
            <div class="col-md-8" style="background-color:green;">col-md-8</div>
        </div>
    </div>
</body>
</html>
2
将bootstrap.min.css文件移动到建议的位置是解决我的问题所必需的。我只移动了.css文件，.js文件仍然会在之后加载。 - Chad McGrath
将我编译好的CSS文件（包括Bootstrap）移动到html5shim和respond之前是我的解决方案 - 谢谢 - Friendly Code
2
根据说明，IE8是您的标准版本，并且将content="IE=edge"设置会以最高模式呈现页面。要使其兼容，请更改为content="IE=8"。
IE8模式支持许多已建立的标准，包括W3C级联样式表2.1规范和W3C选择器API; 它还对W3C级联样式表3.0规范（工作草案）和其他新兴标准提供有限支持。
Edge模式告诉Internet Explorer在可用的最高模式下显示内容。 在Internet Explorer 9中，这相当于IE9模式。 如果将来的Internet Explorer版本支持更高的兼容模式，则设置为edge模式的页面将显示为该版本支持的最高模式。 当在Internet Explorer 9中查看时，这些同一页面仍将以IE9模式显示。
参考What does <meta http-equiv="X-UA-Compatible" content="IE=edge"> do?。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接