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

你从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运行这个代码。

https://github.com/scottjehl/Respond

以防万一。 加载你的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虚拟PCWindows 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") } ] } } 

希望它会帮助你