ie浏览器不兼容css媒体查询的解决办法

顾非白      2022-02-09     602

关键词:

考虑到在不同分辨率下,网站页面依然能显示一致,除了通过js来控制,css媒体查询更为方便,而痛点在于ie8不支持。

我们可以通过respond.js库来解决,这个插件的原理很简单:

将head中所有外部引入的css文件路径取出来存储在一个数组中,遍历数组,并一个个发送AJAX请求,AJAX回调后,分析response中的media query的min-width和max-width语法,它仅仅支持min-width和max-width,分析出viewport变化区间对应相应的css块,页面初始化的时候和window.resize时,根据当前viewport使用相应的css块。

在官方文档中也有一些小提示:
  • 越早引入的respond.js,也就越可能避免ie下出现的闪屏;
  • 不支持嵌套的媒体查询;
  • utf-8格式的css文件对respond.js文件的运行有影响;
  • 跨域会出现闪屏;
由此,可以根据这个情况实现基本思路,需要注意到的地方:
 
1、需要启动本地服务器(localhost),不能使用普通本地的url地址(file://开头);
2、需要外部引入CSS文件,将CSS样式书写在style中是无效的;
3、由于respond插件是查找CSS文件,再进行处理,所以respond文件一定要放置在CSS文件的后面;
4、另外,虽然把respond放置在head里还是在body后面都能够实现,但是建议放置在head中;
5、最好不要为CSS设置utf-8的编码;
 
最近做项目时发现了一个bug:由于动画@keyframe中的@符号,对respond.js造成影响。

如何解决bootstrap与ie不兼容问题

参考技术Abootstrap有使用CSS3,所以ie9以下浏览器不会很顺畅。IE9以下的兼容性不是很好。IE本身就是怪胎,就搞一些和外界标准不一致。搞得web开发考虑这考虑那的兼容性,蛋疼!基本上css3的没法正常使用:-无法正常显示CSS3圆角-... 查看详情

css 媒体查询以针对除 IE 之外的所有浏览器

】css媒体查询以针对除IE之外的所有浏览器【英文标题】:cssmediaquerytotargetallbrowsersexceptforIE【发布时间】:2014-09-2904:08:36【问题描述】:我正在寻找一个针对除IE之外的所有浏览器的媒体查询。例如:@media(........)有没有办法做到... 查看详情

border-radius,box-shadow兼容性解决办法

...dius用于设置HTML元素的圆角效果,但只有IE9、chorme及firefox浏览器支持该属性,IE8及以下浏览器不兼容也不支持border-radius属性,本文章向大家介绍如何解决IE8兼容b 查看详情

使用媒体查询将 CSS 应用于除 IE 之外的所有浏览器

】使用媒体查询将CSS应用于除IE之外的所有浏览器【英文标题】:ApplyCSStoallbrowsersexceptIEusingmediaquery【发布时间】:2018-07-0221:27:32【问题描述】:我找到了一种将媒体查询应用到IE的方法:@media(-ms-high-contrast:none),(-ms-high-contrast:acti... 查看详情

ie浏览器不支持document.getelementsbyclassname的解决办法

1、基础方法①/***通过class名和标签名获取css样式对象组*/functiongetClassNames(classStr,tagName)if(document.getElementsByClassName)returndocument.getElementsByClassName(classStr)else//为了兼容ie8及其以下版本的方法varnodes=document. 查看详情

css的position-relative兼容问题与解决办法

参考技术A开发中遇到了使用相对定位,发现谷歌浏览器和QQ浏览器渲染的方式不一样,对应父级定位不同解决办法把需要定位的元素放在父级中的第一个子元素的位置在实际使用中发现一个兼容性的问题,position:relative是指针对... 查看详情

ie兼容

做项目的时候使用CSS媒体查询后,IE下网站首页会有部分样式失效,打开调试工具则恢复正常,于是放弃在样式表中进行媒体查询,改用JS实现媒体查询,能识别当前屏幕宽度打印出对应信息,但通过JQ获取元素,无论放在Vue构造... 查看详情

jquery不兼容低版本ie浏览器怎么解决办法

jQuery新版本已经不再进行IE低版本(IE6、IE7、IE8)的兼容性处理。如果项目需要兼容IE低版本,需要使用jQuery1.x版本,从2.x开始已经不兼容IE6、7、8了。以下为jQuery官网的通知:jQuery2.xhasthesameAPIasjQuery1.x,butdoesnotsupportInternetExplorer6,7,or... 查看详情

ie兼容性问题

... 署在webserver域名下面,否则会出现跨域问题。IE9以下浏览器 查看详情

解决媒体查询的响应式布局

  众所周知,网页前端开发时兼容IE一直是很头疼的问题。今天接到一个需要响应式布局的问题,主要还要兼容IE8,9。在网上搜索了以下解决方案,现记录如下。 首先,加入代码 <!--[ifltIE9]><scriptsrc="http://css... 查看详情

解决chrome浏览器和ie浏览器上传附件兼容的问题--chrome关闭flash后,uploadify插件不可用的解决办法

项目中遇到过这种情况:利用uploadify插件在IE和chrome浏览器中上传附件正常,突然有一天chrome禁用了flash插件,uploadify插件在chrome中就不能正常使用了,IE上正常。 =================================================================================... 查看详情

创建xmlhttprequest对象时ie的兼容问题解决办法

为了应对所有的现代浏览器,包括IE5和IE6,请检查浏览器是否支持XMLHttpRequest对象。如果支持,则创建XMLHttpRequest对象。如果不支持,则创建ActiveXObject:实例varxmlhttp;if(window.XMLHttpRequest) {//codeforIE7+,Firefox,Chrome,Opera,Safari xmlhtt... 查看详情

ie浏览器不支持document.getelementsbyclassname的解决办法

1、基础方法①/***通过class名和标签名获取css样式对象组*/functiongetClassNames(classStr,tagName)if(document.getElementsByClassName)returndocument.getElementsByClassName(classStr)else//为了兼容ie8及其以下版本的方法varnodes=document.getElementsByTagName(tagName),ret=[];f... 查看详情

浏览器兼容性问题

1、jQuery2.0版本以上的不在支持ie6、7、8;2、ie-css3.htc可以解决ie6/7/8的  边框圆角  属性的兼容。3、IE8对margin:0 auto;这个CSS不再有用了,居中解决办法看http://blog.csdn.net/caolijunmingyan/article/details/66727274、js文件单独... 查看详情

个人整理的兼容性问题和解决办法

...方法:overflow:hidden;或font-size:0;或line-height:xxpx;3在各个浏览器下img有空隙(原因是:回车。)解决方法:让图片浮动。4一个父标签与几个子标签嵌套,父标签不浮动,子标签float,子标签不撑开父的高度 查看详情

bootstrap在ie8下,兼容媒体查询

最近使用bootstrap做网站的时候发现,在ie8下的媒体查询一直失效:后来解决了,做如下记录:1、必须运行在服务器下2、hack条件语法,如下:<!--[iflteie9]><scriptsrc="js/html5shiv.min.js"></script><scriptsrc="js/respond.min.js">&l... 查看详情

SVG 动画:使用 CSS3 媒体查询将 IE10 与其他现代浏览器隔离开来

】SVG动画:使用CSS3媒体查询将IE10与其他现代浏览器隔离开来【英文标题】:SVGanimation:IsolatingIE10fromothermodernbrowserswithCSS3mediaqueries【发布时间】:2013-04-1915:58:42【问题描述】:我在SVG文件中编写了精美的加载动画。我的问题是Inte... 查看详情

IE 无法识别我的媒体查询

...ueries【发布时间】:2015-09-2206:23:23【问题描述】:在其他浏览器中它可以识别并正常运行,但IE似乎无法识别我的媒体查询。我的代码有什么问题吗?我做过一个类似的设计,没有问题,但这个令人困惑。为什么不识别?这是css... 查看详情