IE8问题与Twitter Bootstrap 3
我正在使用新的Twitter Bootstrap创建一个网站。 该网站看起来不错，并在所有必需的浏览器除IE8以外的作品。
在IE8中，它似乎是显示移动版本的元素，但横跨我的桌面上的整个屏幕。 我相信我遇到的问题是Twitter引导程序首先是移动的。 所以出于某种原因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"> </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"> </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"> </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"> </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"> </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"> </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>
你从CDN（bootstrapcdn.com）得到你的CSS respond.js只适用于本地文件。 所以试试IE8的本地副本bootstrap.css。 或阅读： CDN / X域设置
注意请参阅： https ： //github.com/scottjehl/Respond/pull/206
更新：
请阅读： http ： //getbootstrap.com/getting-started/#support
另外，Internet Explorer 8需要使用respond.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]-->
我也必须设置下面的META标签：
<meta http-equiv="X-UA-Compatible" content="IE=edge">
从Bootstrap 2转换到3时，我遇到了同样的问题。我已经获得了respond.js和html5shiv.js，并将我的元素设置为边缘。 我错过了从2到3的navbar元素类型已经改变。 在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网站本身就是这样。
在我的情况下，引导缩小CSS是造成这个问题。 为了在IE8中启动bootstrap 3.0.2（使用F12 Developer Tools进行模拟），我必须：
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）
<!--[if lt IE 9]> <script src="/js/html5shiv.min.js"></script> <script src="/js/respond.min.js"></script> <![endif]-->
把respond.js放在页面底部，但在关闭body标签之前，这里是respond.js链接，并在你的localhost运行这个代码。
以防万一。 加载你的css文件后，确保你加载了特定于IE的js文件。
不要忘记把你的css链接放在<head>因为respond.js只有这些。
如前所述，有两个不同的问题：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
在验证之后：
- DOCTYPE
- X-UA兼容元标记
- 包含html5shiv.js和respond.js（以及下载最新版本）
- respond.js是本地的
- 从网络服务器托管网站，而不是从文件：/ /
- 不使用@import
- …
仍然col-lg，col-md和col-sm不工作。 最后，我把引用的引用移到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>
需要添加 – <meta http-equiv="X-UA-Compatible" content="IE=edge">
我正在使用Bootstrap 3 – 它在我的本地工作的IE浏览器。
我把它住在IE没有工作。
只是Bootstrap不包括在他们的模板中的代码行，我不知道为什么，但它可能是由于它不是W3C兼容。
从解释说，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”>是做什么的？
我有一个解决这个问题。 实际上，IE7和8不支持@media正确，如果你检查“col-md- *”类的CSS，宽度为992px。 只需创建一个新的CSS文件IE例如：IE.css并添加条件注释。 然后直接复制您的设计所需的类与任何媒体查询那里，你就完成了。
从bootstrapv2迁移到v3时，我遇到了完全相同的问题。
如果（像我一样）通过用col-sm-X替换旧的spanX来迁移，还需要添加col-X类。 col-X是任何@media块之外的样式，因此它们在没有媒体查询支持的情况下工作。
要修改容器的宽度，你可以在@media块之外自己设置。 就像是：
.container { max-width: @container-tablet; } @import "twitter-bootstrap/less/bootstrap";
我在IE 10.0遇到同样的问题。 我知道这不完全是在OP的问题，但也许这将是有用的其他人。
就我而言，我在文档的开头有一个空行：
[blank line] <!DOCTYPE html> <html lang="es"> ...
如果空白行位于DOCTYPE和标签之间，则还会显示问题：
<!DOCTYPE html> [blank line] <html lang="es">
一旦我删除了空白行，并没有神奇的X-UA兼容元，IE 10已经开始正确渲染网站。
如果您使用的是PHP和Smarty，请注意您的Smarty注释，因为它们会添加那些有问题的空行:-)
我的头像是这样的：
<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的respond.js，它不会在本地机器上工作，如果我们只是把它放在js中，并将其附加到标题中的html。 它会说拒绝访问。 它只能通过服务器工作，因为IE有安全限制。 ：P
我已阅读每个评论在这里，尝试了一切..但无法让它与Windows 7的工作– Internet Explorer 11的 （ 与文档模式：IE8 ）。
然后想到，运行文件模式（IE8）是不是真正的IE8相同，所以我安装了Windows虚拟PC （ Windows 7与Internet Explorer 8 ）和tadaaaa … 它的作品就像一个魅力！
我已经把这段代码放在页面的底部来使它工作：
<!-- 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="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>
就像一个人站起来一样。 我有同样的问题，以上都没有为我固定。 最终我发现response.js不能解析通过@import引用的CSS。 我有通过@import导入到我的main.css整个bootstrap.min.css 。
因此，请确保您没有任何包含通过@import引用的媒体查询的CSS。
我已经解决了下面的步骤。
（1）为drupal 7安装了Respond.js模块。（2）为库中的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 bootstrap。
要了解更多信息，请查看我的网站博客，了解drupal设计和开发www.devangsolanki.com
如果您使用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="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]-->
使用此解决方案
<!--[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
确保分开链接引导源
如果你使用LESS或者SASS不要贪心编译风格。 在我的项目中，我在主文档中包含了bootstrap.min.css文件的顶部 – 所以对于所有样式应该只有一个请求。
正因为如此，助推班没有正常工作。 单独添加时，按预期工作。
我面临同样的问题，尝试了第一个答案，但缺少一些东西。
如果你们使用的是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") } ] } }
希望它会帮助你
