专栏首页张戈的专栏解决IE响应式的解决方案css3-mediaqueries.js不生效问题

解决IE响应式的解决方案css3-mediaqueries.js不生效问题

前阵子解决了博客在低版本 IE 下会假死的问题,发现居然是因为我自定义 CSS 的闭合误用了中文大括号导致的!

解决这个问题之后,又发现了另外一个坑:发现博客在 IE8 及以下版本的响应式不生效。

奇了怪了,记得鸟哥老早更新 Begin 的时候就解决了这个 IE 下 CSS3 响应式问题,咋就无效呢?

看了下源代码,发现 Begin 下会在 head 部分引入如下代码:

<!--[if lt IE 9]>
<script src="///res.zhangge.net/wp-content/themes/begin/js/html5.js"></script>
<script src="//res.zgboke.com/wp-content/themes/begin/js/css3-mediaqueries.js">
</script>
<![endif]-->

其中 css3-mediaqueries 就是用来解决IE8 及以下版本浏览器不支持 CSS3 media queries 的问题的。

大概工作原理想想知道,应该就是用 js 的方式,先取得写好的 css3 属性,然后动态改变元素样式,从而解决兼容性问题。当然,这种方式肯定会比纯 css 效率低得多,IE 下很明显会略显迟钝,大家自行体验。

经过测试发现,鸟哥的博客在 IE8 下的响应式除了略卡一点,并没有出现响应式失效的情况,为啥我博客就不行呢?苦逼重复的替换了几次 js 文件、刷新各种缓存,硬是没有解决!

没办法了,看来还得求助搜索引擎了。最终,发现居然因为这个 js 不支持跨域(文章忘记收藏了)!

也就是说,这 2 个 js 只能用和主站一样的域名,而不能用其他域名,否则就不会生效!

好吧,懒得去深究为什么它不支持跨域了,直接把上述代码修改如下就搞定了:

<del><!--[if lt IE 9]>
<script src="/wp-content/themes/begin/js/html5.js"></script>
<script src="/wp-content/themes/begin/js/css3-mediaqueries.js">
</script>
<![endif]--></del>

问题终于得到解决,可以安心睡觉了!

最新补充:上次全量更新 Begin 主题的时候,发现问题又重现了!按照本文的经验处理之后还是不行,于是又折腾了大半天,终于搞清楚上文说的不支持跨域指的什么了。

原来,不支持跨域不是说这个 js,而是指含有响应式代码的 CSS 文件!

这里说的响应式 CSS 代码是如下形式:

@media screen and (max-width:480px){.logo-site,.logo-sites{width:140px}}
@media screen and (min-width:900px){.logo-site img,.logo-sites img{transition-duration:.8s}
#menu-box.shadow img{width:90%;height:auto;transition-duration:.8s}
.shadow #site-nav .down-menu a{padding:0 10px;transition-duration:.8s}
.shadow #site-nav .down-menu ul a{line-height:42px;padding:0 0 0 20px!important}}
@media screen and (min-width:900px){#top-menu{height:60px}}
@media screen and (max-width:900px){#top-menu{height:40px}}
@media screen and (max-width:1080px){#top-menu{width:98%}

也就是说,如果要让 css3-mediaqueries.js 生效,那么含有上述响应式的 css 代码就不能跨域!

比如,Begin 主题大部分响应式属性的代码都写在了 style.css,那么要解决这个 IE 兼容性问题,只需要将 style.css 使用和网站相同的域名即可,而不能使用二级域名的 CDN 了!

如果是强迫症,可能觉得不够爽,因为 style.css 算是比较大的文件了!不用 CDN 总是觉得是一个带宽占用大户!

如何解决这个问题呢?很简单!将 style.css 中响应式写法的 css 代码全部复制一份,放到额外的一个 css 文件中,然后使用和网站相同域名,引入到 head 部分的 IE 判断语句中即可!

比如,张戈博客如下引入:

<!--[if lt IE 9]>
<script src="//res.zgboke.com/wp-content/themes/begin/js/html5.js"></script>
<script src="//res.zgboke.com/wp-content/themes/begin/js/css3-mediaqueries.js"></script>
<link rel='stylesheet' href='/wp-content/themes/begin/OldIE.css' type='text/css' media='all' />
<![endif]-->

其中 /wp-content/themes/begin/OldIE.css 就是放了主题所有的响应式 CSS 属性,使用了相对路径,不再使用 CDN,且只在 IE9 以下的浏览器生效!从而完美解决 IE 兼容性问题!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • WordPress高亮插件:Crayon Syntax Highlighter加载优化

    Crayon Syntax Highlighter 是我这种代码控的必装插件。但是,这款插件也有一些小缺憾,比如体积大、拖慢速度、容易产生冲突等。很多博主就是因...

    张戈
  • WordPress集成SendCloud邮件代发,规避SMTP泄漏网站主机真实IP的风险

    还是几个月前,中国博客联盟的晓风依然博主 QQ 联系我,说发现 WordPress 评论回复邮件存在一个巨大的风险:WordPress 评论回复邮件,不管是使用...

    张戈
  • HTTP加速器教程:《Varnish 应用技术指南 V2.1》

    博主有个无厘头老大,要我研究新技术无可厚非,可总是换来换去就无语了!前段时间还要我研究 memcache,我才把 memcache 安装好,他昨天又要我去研究 ...

    张戈
  • 神策数据:在数据采集上的痛苦、幻想与失望

    在这一年来接触了我个人接触了 200 家创业公司,发现都在数据采集上遇到多多少少的问题,我把它们归结为三类:

    搜云库技术团队
  • 2015.1 技术雷达 | 技术篇

    许多项目都存在外部代码依赖,这些依赖中很大一部分是由开源项目提供的。为了确保构建过程可被重现,我们总是与固定版本的外部依赖进行集成。但这就意味着我们与这些类库的...

    ThoughtWorks
  • 生产者消费者模式

    在并发编程中使用生产者和消费者模式能够解决绝大多数并发问题。该模式通过平衡生产线程和消费线程的工作能力来提高程序的整体处理数据的速度。

    哲洛不闹
  • 重要开源!CNN-RNN-CTC 实现手写汉字识别

    手写汉字的一些特点: ①基本笔画变化。印刷体汉字的笔画基本上是横平竖直,折笔(乛、乙、く)的拐角大都是尖锐的钝角、锐角或直角,因而折笔基本上可以看做是由折线段...

    机器学习AI算法工程
  • CenturyLink云战略取决于混合云的中端市场

    面对全球云巨头的市场竞争,云基础架构提供商CenturyLink公司努力保持相关性,并将重新定位,将为那些需要获得公共云和私有云资源的企业IT部门提供服务。 如...

    静一
  • 小游戏能互相直跳,开源一个交叉营销组件

    jocross.js 是微信小游戏上的一个交叉营销组件,找作者收录小游戏后,接入代码即可展示相关游戏入口(其他游戏能展示自己游戏入口),目前展示逻辑为随机展示三...

    花叔
  • 谈谈PostCSS

    CSS,就是这个看似不起眼的家伙,却在开发中发挥着和js一样重要的作用。css,是一种样式脚本,好像和编程语言有着一定的距离,我们可以将之理解为一种描述方法。这...

    前端博客 : alili.tech

扫码关注云+社区

领取腾讯云代金券