如何使引导响应布局在IE8上工作



我已经搜索了一段时间,发现有些人能正常工作,但他们都没有提供任何代码示例。

我尝试了他们的建议,但对我不起作用。通过建议,我尝试添加<meta http-equiv="X-UA-Compatible" content="IE=edge" />respond.jscss3-mediaqueries-js,但都没有帮助。

这里有一个jsfiddle,如果你用IE8查看它,你会看到ab都在同一行,而不管你的浏览器宽度如何。

但如果你使用Chrome、FF或IE9或更高版本进行查看,你会根据浏览器宽度在不同的行或单行中看到它们。

更新

我试图一次取消注释其中一个(css3 mediaquery、html5shiv和response),但没有成功。

<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/latest/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="span4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="span8">
LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT.
</div>
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/latest/js/bootstrap.min.js"></script>
<%--<script type="text/javascript" src="js/css3-mediaqueries.js"></script>--%>
<%--<script type="text/javascript" src="js/html5shiv.js"></script>--%>
<%--<script type="text/javascript" src="js/respond.js"></script>--%>
</script>
</body>
</html>

IE 8不支持开箱即用的媒体查询。

基于这个问题和这个问题,您将希望使用类似css3-mediaqueries-js或Respond的扩展。

尝试使用html5shiv,它基本上是一个HTML5 IE启用脚本,应该可以在IE 6,7和8中使用引导程序。这也可以像这样直接热链接:

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

它必须包含在<身体>元素(即在<头>中)

您的问题是试图将responsd.js与外部域上的CSS样式表一起使用。Respond.js将修复IE6-IE8的媒体查询。

https://github.com/scottjehl/Respond#cdnx-域设置

Respond.js的工作原理是通过AJAX请求CSS的原始副本,所以如果你在CDN(或子域)上托管样式表,你需要上传一个代理页面来实现跨域通信。

有关演示,请参阅cross-domain/example.html:

Upload cross-domain/respond-proxy.html to your external domain
Upload cross-domain/respond.proxy.gif to your origin domain
Reference the file(s) via <link /> element(s):
<!-- Respond.js proxy on external server -->
<link href="http://externalcdn.com/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
<!-- Respond.js redirect location on local server -->
<link href="/path/to/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
<!-- Respond.js proxy script on local server -->
<script src="/path/to/respond.proxy.js"></script>

如果您在跨域设置方面遇到问题,请确保responsd-proxy.html没有附加查询字符串。

根据:https://drupal.org/node/2173441

要让你的引导网站在IE8上工作,你必须遵循以下步骤:

  1. 使用Respond.js模块安装Respond..js文件
  2. 禁用任何CDN以加载引导文件
  3. 使用引导程序库模块在本地安装引导程序文件
  4. 聚合和压缩/admin/config/development/performance中的CSS文件

在Internet Explorer 8中为是,或将类"container"的宽度降低为940px。但在InternetExplorer9+、Firefox、GoogleChrome等中,"contianer"类的宽度被称为1170px。

Zurb基金会也有同样的问题。

如果假设我们的客户请求不考虑在IE8<中查看该网站;,然后我们开始实现引导程序,或者zurb基础RWD功能

这是我一直在研究的一个与Bones框架配合使用的解决方案。它可以很容易地与引导程序一起使用。

https://github.com/gamsim/ieresponsify

IE 8中的跨域css加载问题已按照@Akshay Raje@Craig London的建议得到解决。

为了添加,必须在response.proxy.js之前添加respone.jsresponse.min.js才能使设置工作。

在样式表"link"标记之后,在head标记closed()之前,它的意思是在"head"标记的末尾。这种格式99%适用于所有网站。但在某些drupal引导程序主题不起作用。

请记住将所有内容保存在网站本地文件夹中,不要使用CDN。

<!--[if lt IE 9]>
<script type='text/javascript' src="/sites/all/themes/bootstrap_subtheme/js/css3-mediaqueries.js"></script> 
<script type='text/javascript' src="/sites/all/themes/bootstrap_subtheme/js/html5.js"></script>
<script type='text/javascript' src="/sites/all/themes/bootstrap_subtheme/js/respond.min.js"></script>
<![endif]-->

人们经常从内容交付网络(CDN,如oss.maxcdn.com或cdnjs.cloudflare.com)加载带有媒体查询(引导程序和其他文件)的CSS。Respond.js无法使用外部加载的CSS,因此您必须从服务器加载bootstrap CSS(或其他带有媒体查询的CSS)。

是的,它不支持IE。我不是反引导程序,但我查看了引导程序框架的css代码。发现其他宽度没有定义为%,我在其他博客文章中读到,你应该用%来表示宽度,这样它就会响应,这是真的。

当谈到ipad时,bootstrap用于此目的的css代码不是来自媒体查询,它只是一个普通的css代码,没有在媒体查询中声明。并且它是固定宽度,这是ie7&8.(所以如果你想使用bootsrap,请先考虑一下。)

将来(或者现在),当出现引导程序不支持的新小工具时。你的客户可能会回去解决这个问题。

我们都知道ie7&8仍然存在,所以它应该也能在这两个旧浏览器上工作。

所以,如果我是你,创建你自己的框架,以满足你的网站/项目的所有要求。

但我不是一个反引导者,只是一个思想。。。因为我也在开发网站。。

最新更新