文档章节

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

大笨牛一只
 大笨牛一只
发布于 2014/11/26 18:13
字数 481
阅读 3943
收藏 5
点赞 3
评论 0

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 ⋅ 1

Bootstrap起步介绍

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

名字已被取 ⋅ 2016/04/07 ⋅ 0

ZUI 1.3 发布,性感无比的 HTML5 前端 UI 框架

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

开源中国总统 ⋅ 2015/12/12 ⋅ 24

ZUI 发布 1.3 版本,全新的文档网站来了!

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

炒蚕豆吃蹦豆 ⋅ 2015/05/19 ⋅ 62

关于浏览器的兼容问题

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

熊蛋子17 ⋅ 2017/11/23 ⋅ 0

浏览器兼容性问题解决方案 · 总结

普及:浏览器的兼容性问题,往往是个别浏览器(没错,就是那个与众不同的浏览器)对于一些标准的定义不一致导致的。俗话说:没有IE就没有伤害。 贴士:内容都是自己总结的,不免会出现错误或...

白小明 ⋅ 2017/08/28 ⋅ 0

响应式 Web 设计技巧

什么是响应式设计? iOS 和 Android 的发布,智能手机、平板电脑、智能家电等新设备层出不穷,极大便利了我们的生活,但面对形形色色的终端设备,千差万别的屏幕分辨率,给网页设计带来了新的...

凡尘里的一根葱 ⋅ 2015/11/24 ⋅ 0

内部Hybrid App经验解读

郑昀编纂 关键词:Hybrid,Zepto,Fastclick,Backbone,sui,SPA,pushState,跨域,CORS click 事件还是 tap 事件? Zepto 的 show/hide 有时不靠谱 Android 下的跨域问题 pushState 调用失...

旁观者-郑昀 ⋅ 2015/12/30 ⋅ 0

kisso 3.5 发布,最快最省心的 SSO 构建中间件。

kisso = cookie sso 基于 Cookie 的 SSO 中间件,它是一把快速开发 java Web 登录系统(SSO)的瑞士军刀。引用 @JFinal詹波的一句话:"为您节约更多时间,去陪恋人、家人和朋友 :) "。 首先感...

青苗 ⋅ 2015/12/25 ⋅ 9

ie8响应式兼容方案,respond.js的用法及使用时无效的解决办法

响应式布局,html5和css3,ie8不支持,可以通过respond.js插件来实现响应. 用法注意事项 一,css样式表内容.要放在css文件中, 二,css文件必须是无bom头格式的编码文件 三,css文件必须放在head标签...

越野小生 ⋅ 2015/10/27 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Linux中的端口大全

1 被LANA定义的端口 端口 名称 描述 1 tcpmux TCP 端口服务多路复用 5 rje 远程作业入口 7 echo Echo 服务 9 discard 用于连接测试的空服务 11 systat 用于列举连接了的端口的系统状态 13 d...

寰宇01 ⋅ 10分钟前 ⋅ 0

Confluence 6 如何备份存储文件和页面信息

备份的 ZIP 文件包含有 entities.xml,这个 XML 文件包含有 Confluence 的所有页面内容和存储附件的目录。 备份 Zip 文件结构 页面的附件是存储在附件存储目录中的,通过页面和附件 ID 进行识...

honeymose ⋅ 13分钟前 ⋅ 0

【每天一个JQuery特效】根据状态确定是否滑入或滑出被选元素

主要效果: 本文主要采用slideToggle()方法实现以一行代码同时实现以展开或收缩的方式显示或隐藏被选元素。 主要代码如下: <!DOCTYPE html><html><head><meta charset="UTF-8">...

Rhymo-Wu ⋅ 17分钟前 ⋅ 0

度量.net framework 迁移到.net core的工作量

把现有的.net framework程序迁移到.net core上,是一个非常复杂的工作,特别是一些API在两个平台上还不能同时支持。两个类库的差异性,通过人工很难识别全。好在微软的工程师们考虑到了我们顾...

李朝强 ⋅ 22分钟前 ⋅ 0

请不要在“微服务”的狂热中迷失自我!

微服务在过去几年一直是一个非常热门的话题(附录1)。何为“微服务的疯狂”,举个例子: 众所周知,Netflix在DevOps上的表现非常棒。Netfix可以做微服务。因此:如果我做微服务,我也将非常...

harries ⋅ 23分钟前 ⋅ 0

oAuth2 升级Spring Cloud Finchley.RELEASE踩坑分享

背景 6.19号,spring团队发布了期待已久的 Spring Cloud Finchley.RELEASE 版本。 重要变化: 基于Spring Boot 2.0.X 不兼容 Spring Boot 1.5.X 期间踩过几个坑,分享出来给大伙,主要是关于...

冷冷gg ⋅ 53分钟前 ⋅ 0

OSChina 周一乱弹 —— 理发师小姐姐的魔法

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @冰冰棒- :分享田馥甄的单曲《My Love》 《My Love》- 田馥甄 手机党少年们想听歌,请使劲儿戳(这里) @Li-Wang :哎,头发又长了。。。又要...

小小编辑 ⋅ 今天 ⋅ 8

Kafka1.0.X_消费者API详解2

偏移量由消费者管理 kafka Consumer Api还提供了自己存储offset的功能,将offset和data做到原子性,可以让消费具有Exactly Once 的语义,比kafka默认的At-least Once更强大 消费者从指定分区...

特拉仔 ⋅ 今天 ⋅ 0

NEO智能合约之发布和升级(二)

接NEO智能合约之发布和升级(一),我们接下来说说智能合约的升级功能。 一 准备工作 合约的升级需要在合约内预先设置好升级接口,以方便在升级时调用。接下来我们对NEO智能合约之发布和升级...

红烧飞鱼 ⋅ 今天 ⋅ 0

个人博客的运营模式能否学习TMALL天猫质量为上?

心情随笔|个人博客的运营模式能否学习TMALL天猫质量为上? 中国的互联网已经发展了很多年了,记得在十年前,个人博客十分流行,大量的人都在写博客,而且质量还不错,很多高质量的文章都是在...

原创小博客 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部