- 首页
- 前端开发
- Twitter Bootstrap 3 的 IE8 问题
Twitter Bootstrap 3 的 IE8 问题
[英] IE8 issue with Twitter Bootstrap 3
本文介绍了Twitter Bootstrap 3 的 IE8 问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用新的 Twitter Bootstrap 创建网站.该站点看起来不错并且可以在除 IE8 之外的所有必需浏览器中运行.
在 IE8 中，它似乎在显示移动版本的元素，但在我桌面的全屏上拉伸.我相信我遇到的问题是 Twitter 引导程序首先是移动的.因此，出于某种原因，IE8 将采用此选项.
我还注意到 container 类似乎没有按预期引入 max-width CSS 属性.谁能看到我做错了什么?
<link rel="快捷图标" href="/favicon.ico"><link rel="apple-touch-icon" href="/apple-touch-icon.png"><!-- 引导程序--><link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.css" rel="样式表"><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="样式表">
<div class="topArea clearfix"><div class="容器"><div class="topLinks"><div class="btn-group"><span class="flag" data-toggle="dropdown"></span><ul class="下拉菜单"><li><a href="#">国家 1</a></li><li><a href="#">国家 2</a></li><li><a href="#">国家 3</a></li><li class="divider"></li><li><a href="#">国家4</a></li><li><a href="#">国家 5</a></li><li><a href="#">国家 6</a></li>
<div class="visible-sm btn-group"><div class="plus" data-toggle="dropdown"><i class="icon-plus icon-2x"> </i></div><ul class="下拉菜单"><li><a href="#">零件&服务</a></li><li><a href="#">商店定位器</a></li><li><a href="#">查找服务中心</a></li><li><a href="#">部件列表</a></li><li><a href="#">工具振动</a></li><li><a href="#">资源中心</a></li><li><a href="#">媒体中心</a></li><li><a href="#">注册您的工具</a></li><li><a href="#">关于我们</a></li><li><a href="#"><button type="button" class="btn btn-default">购买地点</button></a></li>
<div class="topNav"><ul class="hidden-sm"><li><div class="btn-group"><a href="#" data-toggle="dropdown">部分&服务<ul class="下拉菜单"><li><a href="#">商店定位器</a></li><li><a href="#">查找服务中心</a></li><li><a href="#">部件列表</a></li><li><a href="#">工具振动</a></li>
<li><a href="#">资源中心</a></li><li><a href="#">媒体中心</a></li><li><a href="#">注册您的工具</a></li><li><a href="#">关于我们</a></li><li><a href="#"><button type="button" class="btn btn-default">购买地点</button></a></li>
<div class="searchArea"><input type="text"/><a href="#" class="goBtn">GO</a>
<div class="mainNavArea"><div class="容器相关"><div class="logo"><img src="/SiteFiles/img/logo.png" title="密尔沃基 - 只有重型" alt="密尔沃基 - 只有重型"/>
<div class="navi"><div class="navbar"><div class="容器"><!-- .navbar-toggle 用作折叠导航栏内容的切换 --><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><!-- 将所有内容放在 .navbar-collapse 中以将其隐藏，直到 768px 以上 --><div class="nav-collapse collapse navbar-responsive-collapse"><ul class="nav nav-justified"><li><span class="dropArrow"> </span><span class="topNavPosition">电动工具</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 class="col-12 col-sm-8 col-lg-8"><h2>电动工具</h2><div class="row"><div class="col-6 col-sm-6 col-lg-6"><a href="#">刀具</a><a href="#">级别</a><a href="#">钳子</a><a href="#">Saws</a><a href="#">螺丝刀</a>
<div class="col-6 col-sm-6 col-lg-6"><a href="#">Snips</a><a href="#">实用刀具</a><a href="#">组合刀</a><a href="#">手动工具配件</a>
<a href="#" class="closeNav">X</a>
<li><span class="dropArrow"> </span><span class="topNavPosition">手工具</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 class="col-12 col-sm-8 col-lg-8"><h2>手动工具</h2><div class="row"><div class="col-6 col-sm-6 col-lg-6"><a href="#">刀具</a><a href="#">级别</a><a href="#">钳子</a><a href="#">Saws</a><a href="#">螺丝刀</a>
<div class="col-6 col-sm-6 col-lg-6"><a href="#">Snips</a><a href="#">实用刀具</a><a href="#">组合刀</a><a href="#">手动工具配件</a>
<a href="#" class="closeNav">X</a>
<li><span class="dropArrow"> </span><span class="topNavPosition">Test &测量<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 class="col-12 col-sm-8 col-lg-8"><h2>测试&测量 <div class="row"><div class="col-6 col-sm-6 col-lg-6"><a href="#">刀具</a><a href="#">级别</a><a href="#">钳子</a><a href="#">Saws</a><a href="#">螺丝刀</a>
<div class="col-6 col-sm-6 col-lg-6"><a href="#">Snips</a><a href="#">实用刀具</a><a href="#">组合刀</a><a href="#">手动工具配件</a>
<a href="#" class="closeNav">X</a>
<li><span class="dropArrow"> </span><span class="topNavPosition">附件</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 class="col-12 col-sm-8 col-lg-8"><h2>配件</h2><div class="row"><div class="col-6 col-sm-6 col-lg-6"><a href="#">刀具</a><a href="#">级别</a><a href="#">钳子</a><a href="#">Saws</a><a href="#">螺丝刀</a>
<div class="col-6 col-sm-6 col-lg-6"><a href="#">Snips</a><a href="#">实用刀具</a><a href="#">组合刀</a><a href="#">手动工具配件</a>
<a href="#" class="closeNav">X</a>
<!--/.nav-collapse -->
<!--/.container -->
<!--/.navbar -->
</标题>
解决方案
你从 CDN (bootstrapcdn.com) 得到你的 CSS respond.js 只适用于本地文件.因此，在 IE8 上使用 bootstrap.css 的本地副本尝试您的网站.或阅读:CDN/X-Domain Setup
注意另见: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 和 Respond.js IE8 支持 HTML5 元素和媒体查询 --><!--[如果是 IE 9]><script src="../../assets/js/html5shiv.js"></script><script src="../../assets/js/respond.min.js"></script><![endif]-->
I am creating a site using the new Twitter Bootstrap. The site looks fine and works in all required browsers except IE8.
In IE8 it seems to be displaying elements of the mobile version but stretched across the full screen of my desktop. I believe the problem I'm having is that Twitter bootstrap is mobile first. So for some reason IE8 is going for this option.
I also notice that the container class does not seem to be pulling in the max-width CSS properties as intended. Can anyone see what I've done wrong?
<!-- 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>
解决方案
You got your CSS from CDN (bootstrapcdn.com) respond.js only works for local files. So try your website on IE8 with a local copy of bootstrap.css. Or read: CDN/X-Domain Setup
Note See also: https://github.com/scottjehl/Respond/pull/206
Update:
Please read: http://getbootstrap.com/getting-started/#support
In addition, Internet Explorer 8 requires the use of respond.js to enable media query support.
See also: https://github.com/scottjehl/Respond
For this reason the basic template contains these lines in the head section:
<!-- 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]-->
这篇关于Twitter Bootstrap 3 的 IE8 问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
