IE8问题与Twitter Bootstrap 3
[英]IE8 issue with Twitter Bootstrap 3
问题描述
我正在使用新的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"> </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>
22 个解决方案
解决方案1
260 已采纳 2013-07-30 21:13:16
你从CDN获得你的CSS（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]-->
解决方案2
62 2013-08-05 09:47:03
我还必须设置以下META标记：
<meta http-equiv="X-UA-Compatible" content="IE=edge">
解决方案3
17 2013-09-17 13:43:04
从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网站本身的含义。
解决方案4
14 2013-12-03 15:17:13
就我而言，引导缩小的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）
<!--[if lt IE 9]>
<script src="/js/html5shiv.min.js"></script>
<script src="/js/respond.min.js"></script>
<![endif]-->
解决方案5
6 2013-07-30 12:39:59
将respond.js放在页面底部，但在关闭body标签之前，这里是respond.js链接，并在你的localhost中运行此代码。
解决方案6
6 2013-12-18 02:21:43
以防万一。 加载css文件后，请确保加载IE特定的js文件。
解决方案7
5 2013-09-27 15:18:42
不要忘记将您的CSS链接放在<head>因为respond.js只接受那些。
解决方案8
5 2013-12-06 10:14:59
如前所述，存在两个不同的问题：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
解决方案9
4 2014-05-08 20:05:08
验证后：
- 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>
解决方案10
2 2014-02-07 17:12:38
从解释说它说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”>做什么？
解决方案11
1 2013-10-20 23:57:06
需要添加 - <meta http-equiv="X-UA-Compatible" content="IE=edge">
我正在使用Bootstrap 3 - 让它在我本地的IE上工作。
我把它放在IE上不起作用。
Just Bootstrap在他们的模板中不包含那行代码，我不知道为什么，但可能是因为它不兼容W3C。
解决方案12
1 2015-01-03 00:22:04
我有一个解决这个问题的方法。 实际上IE7和8并不能正确支持@media，如果你检查css中的“col-md- *”类，那么宽度是在媒体宽度992px中给出的。 只需创建一个新的css文件IE例如：IE.css并添加条件注释。 然后直接使用任何媒体查询复制您的设计所需的类，您就完成了。
解决方案13
0 2013-07-30 16:54:46
从bootstrapv2迁移到v3时，我遇到了完全相同的问题。
如果（像我一样）通过用col-sm-X替换旧的spanX来迁移，则还需要添加col-X类。 col-X是任何@media块之外的样式，因此它们在没有媒体查询支持的情况下工作。
要修复容器宽度，您可以在@media块之外自行设置。 就像是：
.container {
max-width: @container-tablet;
}
@import "twitter-bootstrap/less/bootstrap";
解决方案14
0 2013-10-30 16:49:32
我在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评论，因为他们会添加那些有问题的空白行:-)
解决方案15
0 2013-11-28 09:28:21
我的头标记是这样的：
<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中并将它附加到标头中的html中，它就不能在本地机器上工作。 它会说拒绝访问。 它只能通过服务器工作，因为IE有安全限制。 ：P
解决方案16
0 2014-01-22 12:14:14
我在这里阅读了所有评论，尝试了所有内容..但无法使用它与Windows 7 - Internet Explorer 11 （ 文档模式：IE8 ）。
然后我想到运行文档模式（IE8）与真正的IE8不同，所以我安装了Windows Virtual PC （ 带有Internet Explorer 8的Windows 7 ）和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="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>
解决方案17
0 2014-01-22 23:24:04
如果您使用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]-->
解决方案18
0 2014-03-09 14:26:01
就像一个抬头。 我遇到了同样的问题，以上都没有为我修好。 最后我发现respond.js不会解析通过@import引用的CSS。 我把整个bootstrap.min.css通过@import导入到我的main.css 。
因此，请确保您没有任何包含通过@import引用的媒体查询的CSS。
解决方案19
0 2014-03-28 04:13:48
我已经解决了以下步骤。
（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
解决方案20
0 2015-11-02 17:29:15
使用此解决方案
<!--[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>启用mediaqueries。 此字符串<link rel="stylesheet" type="text/css" href="css/bootstrap-ie7.css" />启用引导字体。
在Bootstrap 3.3.5上测试
链接下载mediaqieries.js 。 链接下载bootstrap-ie7.css
解决方案21
0 2016-02-26 09:30:24
确保单独链接引导源
如果您使用LESS或SASS请不要贪图编译样式。 在我的项目中，我在我的主要样式中包含bootstrap.min.css ，位于文件的顶部 - 因此对于所有样式应该只有一个请求。
因此，boostrap类无法正常工作。 单独添加时，按预期工作。
解决方案22
0 2016-10-20 11:30:51
我遇到了同样的问题，尝试了第一个答案，但缺少了一些东西。
如果你们正在使用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")
}
]
}
}
希望它会对你有所帮助
IE8中未呈现Twitter Bootstrap Dropdown菜单背景
[英]Twitter Bootstrap Dropdown menu background not rendering in IE8
IE8及更低版本中的Twitter Bootstrap Glyphicons部分不透明
[英]Twitter Bootstrap Glyphicons partial opacity in IE8 and below
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
IE8的Bootstrap 3问题
Twitter Bootstrap选项卡在IE8中不起作用
Twitter Bootstrap示例在IE8中不起作用
Twitter Bootstrap'Nav'在ie8上不起作用
如何使Twitter Bootstrap与IE8兼容？
超链接在带有Twitter Bootstrap的IE8中不起作用
Twitter bootstrap 3 RC2 - IE8中的导航无法正常工作
IE8中未呈现Twitter Bootstrap Dropdown菜单背景
IE8及更低版本中的Twitter Bootstrap Glyphicons部分不透明
Twitter提要未在IE8中加载
相关标签