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

前阵子解决了博客在低版本 IE 下会假死的问题，发现居然是因为我自定义 CSS 的闭合误用了中文大括号导致的！
解决这个问题之后，又发现了另外一个坑：发现博客在 IE8 及以下版本的响应式不生效。
奇了怪了，记得鸟哥老早更新 Begin 的时候就解决了这个 IE 下 CSS3 响应式问题，咋就无效呢？
看了下源代码，发现 Begin 下会在 head 部分引入如下代码：

<!--[if lt IE 9]>
<script src="https:///res.zgboke.com/wp-content/themes/begin/js/html5.js"></script>
<script src="https://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 只能用和主站一样的域名，而不能用其他域名，否则就不会生效！
好吧，懒得去深究为什么它不支持跨域了，直接把上述代码修改如下就搞定了：

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

问题终于得到解决，可以安心睡觉了！
最新补充：上次全量更新 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="http://res.zgboke.com/wp-content/themes/begin/js/html5.js"></script>
<script src="http://res.zgboke.com/wp-content/themes/begin/js/css3-mediaqueries.js"></script>
<link rel="stylesheet" href="http://zhang.ge/wp-content/themes/begin/OldIE.css" type="text/css" media="all" />
<![endif]-->

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

收录于{张戈博客} 原文链接原文链接