Twitter Bootstrap 3的IE8问题

html CSS

蛋蛋

2020-03-30

我正在使用新的Twitter Bootstrap创建一个网站。该网站看起来不错，并且可以在除IE8之外的所有必需浏览器中使用。

在IE8中，它似乎在显示移动版本的元素，但延伸到了我的桌面的全屏。我认为我遇到的问题是Twitter引导程序首先是移动设备。因此出于某些原因，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>

第3868篇《Twitter Bootstrap 3的IE8问题》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共20个回答

Mandy村村 2020.03.30

我遇到了同样的问题，尝试了第一个答案，但是缺少了一些东西。

如果您使用的是Webpack，您的CSS将作为一个样式标签加载，而response.js不支持该样式标签，它需要一个文件，因此请确保引导程序已作为一个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")
            }
        ]
    }
}

希望对你有帮助

蛋蛋猿 2020.03.30

确保分别链接引导源

如果您使用LESS或SASS不想贪图样式。在我的项目中bootstrap.min.css，我的主要样式包含在文件的顶部，因此所有样式都应该只有一个请求。

因此，boostrap类无法正常工作。当单独添加时，将按预期工作。

Stafan 2020.03.30

使用此解决方案

<!--[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" />启用引导字体。

在Bootstrap 3.3.5上测试

链接下载 mediaqieries.js。链接下载 bootstrap-ie7.css

JinJin 2020.03.30

我已解决以下步骤。

（1）为drupal 7安装了Respond.js模块。（2）在库中而不是module文件夹中设置了drupal 7的lessphp模块。（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引导程序。

要了解更多信息，请查看我的Drupal设计和开发网站博客www.devangsolanki.com

泡芙 2020.03.30

我的头部标签是这样的：

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

如果要在本地尝试...通过本地主机尝试，或创建质量检查服务器并设置内容并尝试。

我们需要bootstrap 3的response.js，如果仅将其放入js并将其附加到标头中的html，它将无法在本地计算机上工作。它将说访问被拒绝。它仅通过服务器工作，因为IE具有安全限制。：P

斯丁前端 2020.03.30

只是抬起头来。我有同样的问题，以上都不适合我。最终，我发现response.js无法解析通过@import引用的CSS 。我已经将整个bootstrap.min.css进口通过@import我的main.css。

因此，请确保您没有任何包含通过@import引用的媒体查询的CSS 。

卡卡西 2020.03.30

从bootstrapv2迁移到v3时，我遇到了完全相同的问题。

如果（像我一样）通过用col-sm-X替换旧的spanX进行迁移，则还需要添加col-X类。col-X是任何@media块之外的样式，因此它们无需媒体查询支持即可工作。

要固定容器的宽度，您可以在@media块之外自行设置。就像是：

.container {
  max-width: @container-tablet;
}
@import "twitter-bootstrap/less/bootstrap";

宝儿理查德 2020.03.30

我在IE 10.0中遇到了同样的问题。我知道这并不是OP中的问题，但也许对其他人有用。

就我而言，我在文档的开头有一个空行：

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

如果空白行位于DOCTYPE和标签之间，则还会显示问题：

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

一旦我删除了空白行，并且没有神奇的X-UA-Compatible元，IE 10就开始正确渲染该网站。

如果您使用的是PHP和Smarty，请谨慎对待Smarty注释，因为它们会添加那些有问题的空白行：-)

村村Mandy 2020.03.30

需要添加- <meta http-equiv="X-UA-Compatible" content="IE=edge">

我正在使用Bootstrap 3-在我的本地IE上运行它。

我把它直播在IE中不起作用。

只是Bootstrap在他们的模板中没有包含那行代码，我不确定为什么，但这可能是因为它与W3C不兼容。

Gil 2020.03.30

我已解决此问题。实际上，IE7和8不正确支持@media，如果您检查css中的“ col-md- *”类，则宽度为992px。只需创建一个新的CSS文件IE，例如：IE.css并添加条件注释。然后，只需使用那里的任何媒体查询直接复制设计所需的类，就可以完成。

Gil 2020.03.30

如前所述，存在两个不同的问题：1）IE8不支持媒体查询2）与跨域CSS文件结合使用的response.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]-->

还要确保在本地目录中复制response.proxy.gif，response.min.js和response.proxy.js

ProGreen 2020.03.30

验证后：

DOCTYPE
X-UA兼容的元标记
包含html5shiv.js和response.js（并下载最新版本）
本地的response.js
从Web服务器而非File：//托管网站
不使用@import
...

col-lg，col-md和col-sm仍然无法正常工作。最后，我将对Bootstrap的引用移到了对html5shiv.js和response.js的引用之前，所有这些都起作用了。

这是一个片段：

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

    <title>Bootstrap Test for IE8</title>

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

    <!--[if lt IE 9]>
      <script src="includes/js/html5shiv.js"></script>
      <script src="includes/js/respond.min.js"></script>
    <![endif]-->    
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-4" style="background-color:red;">col-md-4</div>
            <div class="col-md-8" style="background-color:green;">col-md-8</div>
        </div>
    </div>
</body>
</html>

Tony凯 2020.03.30

从解释中可以看出，IE8是您的标准版本，并且content="IE=edge"将以最高模式呈现页面。为了使其兼容，请将其更改为content="IE=8"。

IE8模式支持许多已建立的标准，包括W3C级联样式表2.1规范和W3C选择器API。它还为W3C级联样式表3级规范（工作草案）和其他新兴标准提供了有限的支持。

边缘模式告诉Internet Explorer以可用的最高模式显示内容。使用Internet Explorer 9，这等效于IE9模式。如果将来的Internet Explorer版本支持更高的兼容性模式，则设置为边缘模式的页面将以该版本支持的最高模式显示。使用Internet Explorer 9查看时，这些页面仍将以IE9模式显示。

参考<meta http-equiv =“ X-UA-Compatible” content =“ IE = edge”>是做什么的？

JinJin 2020.03.30

不要忘了将CSS链接放在中，<head>因为respond.js只需那些链接即可。

古一 2020.03.30

从Bootstrap 2过渡到3时，我也遇到了同样的问题。我已经获得了response.js和html5shiv.js并将我的meta设置为edge。我错过了导航栏元素类型从2更改为3的情况。在Bootstrap 2中，它是导航。在Bootstrap 3中，它现在是标题。因此，要完全解决问题，我必须

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

在加载CSS之后，请输入以下内容：

<!--[if lt IE 9]>  
    <script src="~/Content/compatibility/html5shiv.js"></script>
    <script src="~/Content/compatibility/respond.min.js"></script>
<![endif]-->

然后改变

<nav class="navbar" role="navigation">
</nav>

至

<header class="navbar" role="navigation">
</header>

哦，好吧，我还加了

<meta name="viewport" content="width=device-width, initial-scale=1.0">

仅仅是因为这就是Bootstrap网站本身所拥有的。

西里Near 2020.03.30

以防万一。加载css文件后，请确保加载IE特定的js文件。

神乐 2020.03.30

您从CDN（bootstrapcdn.com）获得了CSS，response.js仅适用于本地文件。因此，请使用bootstrap.css的本地副本在IE8上尝试您的网站。或阅读： CDN / X域设置

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

更新：

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

另外，Internet Explorer 8需要使用response.js来启用媒体查询支持。

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

因此，基本模板的头部包含以下几行：

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
  <script src="../../assets/js/html5shiv.js"></script>
  <script src="../../assets/js/respond.min.js"></script>
<![endif]-->

西里Mandy 2020.03.30

放在respond.js页面底部但在关闭body标签之前，这是的链接，respond.js并在您的本地主机中运行此代码。

https://github.com/scottjehl/回复

Tom凯 2020.03.30

就我而言，引导程序最小化的CSS导致了问题。为了使Bootstrap 3.0.2在IE8中响应（使用F12开发人员工具模拟），我必须：

1-设置X-UA兼容标志。

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

2-使用非最小的bootstrap.css，而不是bootstrap.min.css

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

3-添加react.js（和html5shiv.js）

<!--[if lt IE 9]>
  <script src="/js/html5shiv.min.js"></script>
  <script src="/js/respond.min.js"></script>
<![endif]-->

古一 2020.03.30

我还必须设置以下META标签：

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

相似问题

基于react18+vite4+zustand网页端仿微信聊天实例

0 回答

基于tauri+vite4+pinia跨端后台管理系统应用

0 回答

HTML5 Drag与Drop 拖动时更改图标/光标

5 回答

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

25 回答

基于tauri+vue3跨端聊天应用|tauri仿微信模板

0 回答

Ace Editor一款比较好用的展示代码组件

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android