解决办法:引入Respond.js让IE6-8支持CSS3 Media Query

使用方式

参考官方demo:http://scottjehl.github.com/Respond/test/test.html

1.在css中正常用 min/max-width media queries

@media screen and (min-width: 480px){
...styles for 480px and up go here
}

2.引入respond.min.js,但要在css的后面(越早引入越好,在ie下面看到页面闪屏的概率就越低,因为最初css会先渲染出来,如果respond.js加载得很后面,这时重新根据media query解析出来的css会再改变一次页面的布局等,所以看起来有闪屏的现象)

参考链接:Respond.js让IE6-8支持CSS3 Media Query

下载地址:https://github.com/scottjehl/Respond

ie8及其以下版本兼容性问题之响应式的更多相关文章

  1. 探讨兼容IE低版本的PC端响应式布局

    http://www.jiangweishan.com/article/lowIeResposive.html 响应式布局,oh my god!!有点醉了,感觉是老生常谈的话题了.虽然已经谈过很多了, ...

  2. ie8及其以下版本兼容性问题之placeholder实现

    1. 普通浏览器下修改placeholder颜色 因为每个浏览器的CSS选择器都有所差异,所以需要针对每个浏览器做单独的设定. 示例: input::-webkit-input-placeholder ...

  3. ie8及其以下版本兼容性问题之input file隐藏上传文件

    文件上传时,默认的file标签很难看,而且每个浏览器下都有很大差距.因此我们基本都把真正的file标签给隐藏,然后创建一个标签来替代它.但是由于IE出于安全方面的考虑上传文件时必须点击file的浏览按 ...

  4. ie8及其以下版本兼容性问题之圆角

    解决办法:在http://css3pie.com/页面下载一个PIE.htc的文件,加载到根目录下,然后在css中加上一句behavior:url(../js/PIE.htc);如下: .border ...

  5. ie8及其以下版本兼容性问题之文本省略

    1. 单行文本省略 单行文本省略适用于文本超出内容显示区,则在末尾显示省略号 1.1 普通文本超出省略 普通文本超出显示省略号,示例: .p{ height: 30px line-height: 30 ...

  6. picturefill + picture 标签 实现兼容性很棒的 响应式图片 自适应 屏幕大小

    polyfill 它是一个能够补齐浏览器兼容性问题的一个东西,使用到的<picture></picture>标签 ,并不是所有浏览器都支持,为了实现更好的兼容效果,这里就使用到 ...

  7. Vue响应式变化

    Vue有一个很方便的特性就是Vue的双向绑定,即响应式变化,在Vue2.X版本中,Vue响应式变化靠的是Object.defineProperty方法实现的,但是这个方法有个问题,就是对数组的支持不全 ...

  8. JuCheap V2.0响应式后台管理系统模板正式发布beta版本

    JuCheap V1.* 查看地址: http://blog.csdn.net/allenwdj/article/details/49155339 经过半年的努力,JuCheap后台通用响应式管理后台 ...

  9. 响应式布局中重要的meta标签设置.适用于手机浏览器兼容性设置

    <!-- #手机浏览器兼容性设置 -->    <meta content="application/xhtml+xml;charset=UTF-8" http- ...

随机推荐

  1. [Luogu] P1233 木棍加工

    题目描述 一堆木头棍子共有n根,每根棍子的长度和宽度都是已知的.棍子可以被一台机器一个接一个地加工.机器处理一根棍子之前需要准备时间.准备时间是这样定义的: 第一根棍子的准备时间为1分钟: 如果刚处理 ...

  2. 65.dynamic mapping

    主要知识点: 理解dynamic mapping 定制dynamic mapping 更改default dynamic mapping     一.理解dynamic mapping 1.基本概念 ...

  3. CentOS与FreeBSD环境下安装filebeat

    业务服务器CentOS与FreeBSD共存(痛苦囧...) CentOS rpm --import https://artifacts.elastic.co/GPG-KEY-elasticsearch ...

  4. 【模板】非旋转Treap

    Treap,也叫做树堆,是指有一个随机附加域满足堆的性质的二叉搜索树. 如果一棵二叉搜索树插入节点的顺序是随机的,那我们得到的二叉搜索树在大多数情况下是平衡的,期望高度是log(n). 但有些情况下我 ...

  5. Spring Cloud 之 Cookie 丢失 与 Host 传递

    通过spring zuul 代理至后台,写入Cookie发现无法写入,到浏览器中,和无法获取Domain域名 通过长时间的度娘和求助别人发现:Spring-zuul  需要加入以下配置 zuul.se ...

  6. Fibonacci数列(codevs 1250)

    题目描述 Description 定义:f0=f1=1, fn=fn-1+fn-2(n>=2).{fi}称为Fibonacci数列. 输入n,求fn mod q.其中1<=q<=30 ...

  7. 一个最简单的SPRINGMVC示例

    持久层,服务层,表现层都涉及到了. 这个分得确实比DJANGO细致, 多体会,多注解..:) The domain layer package com.packt.webstore.domain; i ...

  8. cocos2d-x andriod, Box2D.h: No such file or directory

    原文链接:r=47980">http://www.cocos2d-x.org/forums/6/topics/47503? r=47980 You need to include li ...

  9. php file_get_contents遇到https的处理办法

    最近调整了文件上传后的资源路径,导致pageOffice在线编辑功能无法正常使用,每一次打开文件都报错:该文件为0字节.仔细看了一下程序,整理逻辑流程如下图: 增加日志后发现,保存在服务器路径下的该条 ...

  10. 霸气側漏的HTML5--之--强大的form表单

    今天学习了一下html5,发现他真的太强大了,暂不说新增的画布,通信,本地存储等的炸天功能,就连表单也是异常的好用.忍不住发一篇博客和大家分享一下.原谅我标题党了.以后的html5的学习记录博文就以& ...