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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

发表评论

gravatar

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

刷新评论

目前评论:39   其中:访客  30   博主  9

  1. 走趣网 1 来自天朝的朋友 谷歌浏览器 Windows 7 山西省 电信

  2. rainman 4 来自天朝的朋友 谷歌浏览器 Mac OS X 10_10_5 江苏省连云港市 电信

    不支持跨域的话貌似也有解决办法的,不过还是直接放到同一域名下省点事…
    另:博客禁掉复制了么~

    • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Windows 7 广东省广州市 电信

      嗯,懒得研究跨域问题。
      博客除了代码,其他复制基本属于耍流氓。 :cool:

      • rainman 4 来自天朝的朋友 谷歌浏览器 Mac OS X 10_10_5 江苏省连云港市 电信

        然而感觉没办法从根本上解决 T_T,想要拷贝的人还是有办法…大不了查看 html…
        或者其实删掉一段 js 就可以 select 了…

        • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Windows 7 广东省广州市 电信

          那我还能说什么呢?博客明明申明了不要转载,防君子不防小人。也算是折腾的一部分

          • rainman 4 来自天朝的朋友 谷歌浏览器 Mac OS X 10_10_5 江苏省连云港市 电信

            我是觉得,防转载的之类,从博客本身是防不了的。只能从目标网站入手,看到有篡改版权的转载就发邮件抗议,然后将其地址和截图挂到自己的博客里…

            • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Windows 7 广东省广州市 电信

              那相当于给人家宣传了。

              • rainman 4 来自天朝的朋友 谷歌浏览器 Mac OS X 10_10_5 江苏省连云港市 电信

                当然不是啊,凭借张戈博客的影响力,你如果在博客里挂上他的网站,肯定会有很多人包括我直接在浏览器里把那个域名屏蔽掉。

                • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Windows 7 广东省广州市 电信

                  你把我博客想得太强大了。 :???:

                  • rainman 4 来自天朝的朋友 谷歌浏览器 Mac OS X 10_10_5 江苏省连云港市赣榆县 电信

                    不是我想…是真的很强大 :wink:

  3. 小超 4 来自天朝的朋友 谷歌浏览器 Windows 7 海南省 电信

    好奇,怎么能让代码可以复制,文字不能复制,求教

    • rainman 4 来自天朝的朋友 谷歌浏览器 Mac OS X 10_10_5 江苏省连云港市 电信

      css 里有一个属性…user-select,在需要禁止选择的地方加上这个 style 就可以了..

      • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Windows 7 广东省广州市 电信

        :!: 赤裸裸的拆台

        • 小超 4 来自天朝的朋友 谷歌浏览器 Windows 7 海南省 电信

          博主,求指教

      • 小超 4 来自天朝的朋友 谷歌浏览器 Windows 7 海南省 电信

        我问的不是这个,我问的是,能在这个div里面,只允许代码复制,这才是关键

        • rainman 4 来自天朝的朋友 谷歌浏览器 Mac OS X 10_10_5 江苏省连云港市赣榆县 电信

          在代码的那个 div 里 user-select: auto; 应该就可以了吧…
          就比如说:
          《style》
          .post-text{-webkit-user-select: none; -moz-user-select: none; -o-user-select: none; user-select: none;}
          .post-code{-webkit-user-select: auto; -moz-user-select: auto; -o-user-select: auto; user-select: auto;}
          《/style》
          《div class=”post-text”》
          正文
          《div class=”post-code”》
          《pre》《code》
          hello world
          《/code》《/pre》
          《/div》
          《/div》
          貌似打不了代码…把《》换成试一下吧~

          • 小超 4 来自天朝的朋友 谷歌浏览器 Windows 7 海南省 电信

            对呀,明白了,谢谢

            • rainman 4 来自天朝的朋友 谷歌浏览器 Mac OS X 10_10_5 江苏省连云港市赣榆县 电信

              这是我猜的…可以看下博主的源代码~…

              • 小超 4 来自天朝的朋友 谷歌浏览器 Windows 7 海南省 电信

                我看了他的源码了,果真如此,哈哈,而且还真精,用js写的,我尝试2种方法修改css都不行,唉,败给他了,改天下个停止js允许的插件在试试 :mrgreen:

                • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Windows 7 广东省广州市 电信

                  :!:

                  • 小超 4 来自天朝的朋友 谷歌浏览器 Windows 7 海南省 电信

                    博主,页面的js你是怎么写的呀?点击关闭,是怎么判断的呢?是用定时器么?还是用判断循环?求代码参考一下

                  • 梦忻屋 1 来自天朝的朋友 谷歌浏览器 Windows 7 福建省厦门市 电信

                    其实要复制特别简单啊,加一个javascript:document.body.contentEditable=’true’; document.designMode=’on’; void 0 在谷歌浏览器的导航栏就能复制了 :razz:

                    • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Mac OS X 10_11_3 广东省深圳市 电信

                      都是来拆台的,自己博客弄点啥都不行。 :arrow:

  4. 产融贷p2p理财 1 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 电信

    膜拜大神!

  5. 搜推宝排名大师 1 来自天朝的朋友 谷歌浏览器 Windows XP 浙江省嘉兴市 电信

    现在都很少用 ie了,老是崩溃,占用cpu 很高

  6. 老杨 4 来自天朝的朋友 火狐浏览器 Windows 10 广东省肇庆市 电信

    这主题貌似 Win10 IE11 会错位……

  7. 威客网 1 来自天朝的朋友 谷歌浏览器 Windows 7 广西南宁市 联通

    不错,解决了我的问题

  8. themebetter 3 来自天朝的朋友 谷歌浏览器 Windows 10 河南省信阳市 电信

    现在年轻人用IE的少

  9. aunsen 4 United Kingdom 火狐浏览器 Windows 10 新加坡 Digital Ocean股份有限公司亚太地区新加坡数据中心

    我用的七牛岂不是也完蛋了 :shock:

  10. qq昵称大全 1 来自天朝的朋友 谷歌浏览器 Windows 7 福建省泉州市 电信

    越来越觉得张戈、夏日博客等其他一些自媒体博客比卢松松博客更具有可读性。。这是为什么呢?

    • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Windows 7 广东省广州市 电信

      技术类博客实践性会强一些。

  11. 静松太极拳 3 来自天朝的朋友 谷歌浏览器 Windows 7 广西南宁市 电信

    有用 学习试试看

  12. 园子大魔王 2 来自天朝的朋友 谷歌浏览器 Ubuntu Linux 湖北省襄阳市 电信

    你很久没有更新文章了啊

    • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Windows 7 广东省广州市 电信

      几天=很久? :evil:

  13. boke112导航 5 来自天朝的朋友 谷歌浏览器 Windows 7 广西南宁市 电信

    竟然不支持跨域这么隐蔽的问题都被博主解决了,太厉害了

  14. 新成 2 来自天朝的朋友 谷歌浏览器 Windows 7 河北省保定市 电信

    技术控

  15. 被吓了 0 来自天朝的朋友 谷歌浏览器 Windows 7 河南省焦作市 联通

    原因:查看了下源代码

  16. 瓶子 0 未知系统 谷歌浏览器 Windows 7 局域网 对方和您在同一内部网

    大神你好 ,关于ie响应式解决方案中的 , 这个html5.js 有什么作用, 你的服务器里面好像没有这个文件了

  17. gg 0 来自天朝的朋友 火狐浏览器 Windows 7 江苏省苏州市 电信

    哈哈哈哈哈哈

加载中,请稍候...