IE8问题与Twitter Bootstrap 3-Java 学习之路

224

我正在使用新的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>

22 回答

2
你从CDN获得你的CSS（bootstrapcdn.com）respond.js只适用于本地文件 . 因此，请使用bootstrap.css的本地副本在IE8上尝试您的网站 . 或者阅读：CDN/X-Domain Setup

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

Update:

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

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

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

因此，基本模板在head部分包含以下行：
```


```
回复于 2024-05-14T12:36:30+08:00
0
我还必须设置以下META标记：
```
<meta http-equiv="X-UA-Compatible" content="IE=edge">
```
回复于 2024-05-14T12:36:30+08:00
0
从Bootstrap 2转换到3时我遇到了同样的问题 . 我已经有了response.js和html5shiv.js并将我的meta设置为edge . 我错过了从2到3的导航栏元素类型已经改变 . 在Bootstrap 2中它是导航 . 在Bootstrap 3中它现在是 Headers . 所以要彻底解决我不得不面对的问题
```
<meta http-equiv="X-UA-Compatible" content="IE=edge">
```
在我加载我的CSS后把它放好：
```

```
然后改变
```
<nav class="navbar" role="navigation">
</nav>
```
至
```
<header class="navbar" role="navigation">
</header>
```
哦，为了好的措施，我还补充说
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
只是因为这就是Bootstrap网站本身的含义 .
回复于 2024-05-14T12:36:30+08:00
4
就我而言，引导缩小的CSS导致了这个问题 . 要使IE8中的bootstrap 3.0.2响应（使用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 - 添加respond.js（和html5shiv.js）
```

```
回复于 2024-05-14T12:36:30+08:00
259

将 respond.js 放在页面底部但在关闭 body 标记之前，这里是 respond.js 的链接并在您的localhost中运行此代码 .

https://github.com/scottjehl/Respond

回复于 2024-05-14T12:36:30+08:00
0

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

回复于 2024-05-14T12:36:30+08:00
6

不要忘记将您的CSS链接放在 <head> 中，因为 respond.js 只接受那些 .

回复于 2024-05-14T12:36:30+08:00

如前所述，存在两个不同的问题：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]-->

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

回复于 2024-05-14T12:36:30+08:00

验证后：

DOCTYPE
兼容X-UA的元标记
包含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>

回复于 2024-05-14T12:36:30+08:00

0

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

我正在使用Bootstrap 3 - 让它在我本地的IE上工作 .

我把它放在IE上不起作用 .

Just Bootstrap在他们的模板中不包含那行代码，我不知道为什么，但可能是因为它不兼容W3C .

回复于 2024-05-14T12:36:30+08:00
62

根据解释，它说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模式显示 .

参考What does <meta http-equiv="X-UA-Compatible" content="IE=edge"> do?

回复于 2024-05-14T12:36:30+08:00
2

我有一个解决这个问题的方法 . 实际上IE7和8并不能正确支持@media如果你检查css中的“col-md- *”类，那么宽度是在媒体宽度992px中给出的 . 只需创建一个新的css文件IE例如：IE.css并添加条件注释 . 然后直接使用任何媒体查询复制您的设计所需的类，您就完成了 .

回复于 2024-05-14T12:36:30+08:00
5
从bootstrapv2迁移到v3时，我遇到了完全相同的问题 .

如果（像我一样）通过用col-sm-X替换旧的spanX来迁移，则还需要添加col-X类 . col-X是任何@media块之外的样式，因此它们在没有媒体查询支持的情况下工作 .

要修复容器宽度，您可以在@media块之外自行设置 . 就像是：
```
.container {
  max-width: @container-tablet;
}
@import "twitter-bootstrap/less/bootstrap";
```
回复于 2024-05-14T12:36:30+08:00
0
我在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评论，因为他们会添加那些有问题的空白行:-)
回复于 2024-05-14T12:36:30+08:00

我的头标记是这样的：

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

如果你想在本地尝试...尝试通过localhost，或创建一个QA服务器并设置内容并尝试 .

我们需要response.js for bootstrap 3，如果我们把它放在js中并将它附加到 Headers 中的html中，它就不能在本地机器上工作 . 它会说拒绝访问 . 它只能通过服务器工作，因为IE有安全限制 . ：P

回复于 2024-05-14T12:36:30+08:00

我让它与Windows 7 - Internet Explorer 11（ with document mode: IE8 ）一起使用 .

然后我想到运行文件模式（IE8）与真正的IE8不一样，所以我安装了 Windows Virtual PC （ Windows 7 with Internet Explorer 8 ）和tadaaaa ...... it works 就像一个魅力！

我把这段代码放在页面底部以使其工作：

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

回复于 2024-05-14T12:36:30+08:00

0

就像一个抬头 . 我遇到了同样的问题，以上都没有为我修好 . 最终我发现 respond.js 不解析通过 @import 引用的CSS . 我将整个 bootstrap.min.css 通过 @import 导入我的 main.css .

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

回复于 2024-05-14T12:36:30+08:00
17
我已经解决了以下步骤 .

（1）为drupal 7安装了Respond.js模块 . （2）在库中设置drupal 7的lessphp模块，而不是模块文件夹 . （3）（3.1） <meta http-equiv="X-UA-Compatible" content="IE=edge">

（3.2）
```

```
使用主题设置的cdn bootstrap .

要了解更多信息，请查看我的网站博客，了解drupal设计和开发www.devangsolanki.com
回复于 2024-05-14T12:36:30+08:00

如果您使用Bootstrap 3并且除IE之外的其他浏览器一切正常，请尝试以下操作 .

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

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

回复于 2024-05-14T12:36:30+08:00

0
使用此解决方案
```

```
此字符串 <script src="js/css3-mediaqueries.js"></script> 启用mediaqueries . 此字符串 <link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" /> 启用引导字体 .

在Bootstrap 3.3.5上测试

链接下载mediaqieries.js . 链接下载bootstrap-ie7.css
回复于 2024-05-14T12:36:30+08:00
0

确保单独链接引导源

如果您使用 LESS 或 SASS ，请不要贪婪地编译样式 . 在我的项目中，我在主要样式中包含了 bootstrap.min.css ，位于文件的顶部 - 因此对于所有样式应该只有一个请求 .

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

回复于 2024-05-14T12:36:30+08:00

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

如果你们正在使用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")
            }
        ]
    }
}

希望它会对你有所帮助

回复于 2024-05-14T12:36:30+08:00

IE8问题与Twitter Bootstrap 3

22 回答

确保单独链接引导源

相关问题