文档章节

样式文件跨域导致Respond.js插件在IE浏览器失效的问题

大笨牛一只
 大笨牛一只
发布于 2014/11/26 18:13
字数 481
阅读 4011
收藏 5

Respond.js主页: https://github.com/scottjehl/Respond

Respond.js是为了解决IE6-IE8不支持响应式设计而编写的一个插件,可以实现css3的媒体查询,官方演示地址:https://rawgit.com/scottjehl/Respond/master/test/test.html

在Chrome、Firefox、IE浏览器测试官方给出的页面都是正常的,网页背景色会随着浏览器窗口的大小改变。可以看到该页面的样式文件和测试页面本身都是在同一个域名下面。而通常大中型网站一般都会把样式文件单独放在一个子域名下面,这种情况如果是单独的引用该插件是不起作用的。

官方给出的解决方案如下图:

例如:

网页的地址为: http://www.domain.com/index.html 
css文件地址为: http://static.domain.com/css/common.css
Respond.js文件地址为: http://static.domain.com/js/Respond.js


将下载的压缩包下cross-domain文件夹中的两个文件:respond-proxy.html、 respond.proxy.gif 放置到 www.domain.com域名所在的文件夹下,文件路径假设为: 

http://www.domain.com/respond/respond-proxy.html
http://www.domain.com/respond/respond.proxy.gif


文件respond-proxy.html放在子域名所在文件夹下,文件路径假设为:

http://static.domain.com/html/respond-proxy.html


网页文件http://www.domain.com/index.html 的头部应该这样写:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Respond JS Test Page</title>
	<!--子域名的文件-->
	<link href="http://static.domain.com/css/common.css" rel="stylesheet"/>
	<script src="http://static.domain.com/js/Respond.js"></script>
	<link href="http://static.domain.com/html/respond-proxy.html" id="respond-proxy" rel="respond-proxy" />
	<!--网页所在域名的文件-->
	<link href="http://www.domain.com/respond/respond.proxy.gif" id="respond-redirect" rel="respond-redirect" />
	<script src="http://www.domain.com/respond/respond.proxy.js"></script>
</head> 
<body>
	<p>网页内容</p>
</body>
</html>


窄屏情况下IE浏览器会出现0.5秒的闪屏现象,不过看起来不算不太明显。

何时IE全消灭,天下前端俱欢颜!



© 著作权归作者所有

共有 人打赏支持
大笨牛一只
粉丝 4
博文 29
码字总数 9188
作品 0
广州
个人站长
让Bootstrap 3兼容IE8浏览器

让Bootstrap 3兼容IE8浏览器 看到这篇文章有越来越多的人看,我决定给大家节省时间,废话少说。有几个点大家要注意。 1、本地调试需要Web Server(如IIS、Apache,Nginx),单纯地本地打开文...

次长风
2015/07/31
0
1
Bootstrap起步介绍

起步 简要介绍Bootstrap,以及如何下载、使用,还有基本模板案例等等. 下载 下载bootstrap有三种形式. 用于生产环境的Bootstrap 编译并压缩后的Css、Javascript和字体文件.不包含文档和源文件...

名字已被取
2016/04/07
199
0
ZUI 1.3 发布,性感无比的 HTML5 前端 UI 框架

ZUI v 1.3 一个开源前端实践方案,帮助你快速构现代跨屏应用。 在Github上项目:https://github.com/easysoft/zui 特色 简单易用,快速构建美观的现代web应用; 轻量级高性能,让你的应用更快...

开源中国总统
2015/12/12
15.3K
24
ZUI 发布 1.3 版本,全新的文档网站来了!

ZUI正式发布1.3版本。 全新的文档网站来了!键盘侠新福利:使用搜索来查找内容,并支持快捷键操作。 新增图表视图组件,支持对饼图、柱状图和曲线图的展示。 另外微调了默认配色,对多个组件...

炒蚕豆吃蹦豆
2015/05/19
17.4K
62
关于浏览器的兼容问题

关于浏览器的兼容问题 1. 什么是 CSS hack 根据百度的简述:CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如...

熊蛋子17
2017/11/23
0
0

没有更多内容

加载失败,请刷新页面

加载更多

网站优化技术包括哪些内容

网站优化Incapsula超越简单的内容缓存,可以优化网站性能或应用程序的用户体验,优化包括内容缩小、动态文件压缩、图像压缩、会话重用优化、TCP优化和连接预合并。 动态文件压缩,普通的web...

上树的熊
4分钟前
0
0
业界 | Teradata全球调研:四分之三企业分析项目数据科学家“缺货”

当地时间10月15日,2018 Teradata全球用户大会在美国拉斯维加斯举行。来自15个国家的3000多位数据人参与了本次峰会。 大会第一日,Teradata发布了针对“企业数据分析”的2018年调研结果。 调...

Mr_zebra
5分钟前
0
0
java 使用 Unsafe不使用构造器创建对象

这里有一个User没有无参构造 public class User { public User(String username, String password) { this.username = username; this.password = password; } ......

ValSong
7分钟前
0
0
eureka 高可用配置 unavailable-replicas 问题.

在使用spring cloud 配置eureka 高可用配置时.发现配置的节点一直无法获取心跳. eureka控制台界面上一直显示的挂载节点 是 unavailable-replicas 查看日志.就是获取心跳的地址不对. 默认的健...

拖鞋莫止步
7分钟前
0
0
Vue2 模板template的四种写法

<div id="app">    <h1>我是直接写在构造器里的模板1</h1></div> <template id="demo3">    <h1 style="color:red">我是选项模板3</h1></template> <script type="x-t......

粒子数反转
8分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部