【前言】
之前讲解响应式布局时,只是举了几个简单例子。后直接开始BootStrap框架讲解,由于时间问题,对于兼容未做介绍。最近又有同学测试后发现IE不支持媒体查询@media,对此在这里做下记录,总结下ie浏览器不兼容css媒体查询的解决办法。
【问题】
考虑到在不同分辨率下,网站页面依然能显示一致,除了通过js来控制,css媒体查询更为方便,而痛点在于ie8不支持。
【思考】
首先我们来测试下BootStrap在IE下的情况,测试后发现可以正常支持响应布局。那么为什么BootStrap可以呢?经常使用BootStrap的可以发现,Bootstrap里面引入了这个Respond.js文件,从名字看出来是自适应的兼容。也正是这个脚本,使得IE6-8支持CSS3 Media Query
respond.js的CDN可以去网上找,这里我写了出来,打开复制即可:
1.4.2版:
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>引入后,打开IE看下,会发现自适应的效果挺好的。因此Respond.js让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
【解决方案】
我们可以通过respond.js库来解决,这个插件的原理很简单
【插件原理】
需要理解respond.js的实现思路:
第一步,将head中所有外部引入的CSS文件路径取出来存储到一个数组当中;
第二步,遍历数组,并一个个发送AJAX请求;
第三步,AJAX回调后,分析response中的media query的min-width和max-width语法(注意,仅仅支持min-width和max-width),分析出viewport变化区间对应相应的css块;
第四步,页面初始化时和window.resize时,根据当前viewport使用相应的css块
【核心理论】
【文档提示】
在官方文档当中的一些提示:
1、越早的引入respond.js文件,也就越可能避免IE下出现的闪屏。
2、不支持嵌套的媒体查询
3、utf-8的字符编码对respond.js文件的运行有影响
官方API原文:if CSS files are encoded in UTF-8 with Byte-Order-Mark, they will not work with Respond.js in IE7 or IE8.
基本含义就是:utf-8格式的CSS文件字符编码会对插件造成影响。
但是在我使用IE6-8进行测试的时候,都能够正常显示(无论是在css文件中增加charset设置还是在link标签中增加charset设置)。因此,并不是太清楚这个位置bug的含义。
4、跨域可能会出现闪屏(还没有测试,具体情况不详)
【其他插件】
其他的支持响应式布局的插件-css3-mediaqueries-js
css3-mediaqueries-js官方文档和demo都没有,相对于respond.js css3-mediaqueries-js支持几乎所有的media query的语法。会出现闪屏。并不是很推荐使用,虽然能够支持全部的mediaqueries,但min-width和max-width其实就可以满足我们对响应式布局的需要。
【注意】
最近做项目时发现了一个bug:由于动画@keyframe中的@符号,对respond.js造成影响
.
相关推荐
它通过内联样式表(VML或PNG图像)来实现这些效果,使老版本的IE浏览器能够呈现近似的现代浏览器视觉效果。 "html5.js"则是另一种解决IE8不支持HTML5新元素的方法。这个脚本通过检测浏览器版本,然后为IE8添加对...
总之,`css3-mediaqueries.js`作为应对IE浏览器不支持CSS3媒体查询的一个解决方案,帮助我们创建了更具响应性的网站。但同时,我们也应该关注技术趋势,适时地调整我们的开发策略,以适应不断变化的浏览器环境。
1. **使用` conditional comments `**:这是微软为解决IE浏览器兼容性问题而创建的一种特殊注释。可以这样使用: ```html <!--[if lt IE 9]> <link rel="stylesheet" href="ie8-media-query.css"> <![endif]--> ``...
此外,IE8不支持css3媒体查询,解决办法是使用respond.js库,在页面中所有css文件的引用位置之后引用Respond.js。 而且,IE8不支持HTML5新标签,解决办法是使用html5shiv.js库,在页面中引用html5shiv.js文件,必须...
综上所述,虽然IE浏览器对HTML5的支持存在局限,但通过合理的代码编写和使用辅助工具,可以有效解决兼容性问题,使HTML5网站在IE浏览器上也能流畅运行。在实践中,开发者应保持对新技术的关注,不断更新自己的技能,...
标题和描述均聚焦于“CSS浏览器兼容性的各种代码解决方案”,这是一个在前端开发中常见的挑战,尤其是在需要确保网站在多种浏览器中表现一致时。由于不同浏览器(如IE6.0、IE7.0、Firefox2、Opera9等)对CSS的解析...
标题和描述均提到了“IE浏览器和火狐浏览器兼容问题有部分js”,这指向了在Web开发中一个常见的挑战——确保网页在不同浏览器上的表现一致。浏览器兼容性问题主要源于不同浏览器对Web标准(如HTML、CSS和JavaScript...
标题“bootstrap兼容IE6的css”表明我们要解决的是使Bootstrap在这些老版本的IE浏览器中正常工作的技术问题。 在进行Bootstrap与旧版IE兼容性开发时,主要涉及以下几个关键知识点: 1. **CSS Hack**: 由于不同...
3. **条件注释**:针对特定版本的IE浏览器,可以使用条件注释来加载不同的样式表。例如,只针对IE8及以下版本加载特定的CSS文件。 4. **渐进增强与优雅降级**:首先编写基础的HTML结构和样式,然后逐步添加更高级的...
以下是对这些版本IE浏览器CSS兼容性的详细解析: 1. **At-rules**: - `@charset`: IE5.0不支持,但从IE5.5开始支持。 - `@import`: 所有版本的IE都支持。 - `@media`: IE5.0不支持,但从IE5.5开始支持,但对CSS...
测试IE8可以检查CSS选择器、媒体查询等新特性的兼容性。 4. **IE9**: 这是微软的一个重大飞跃,开始全面支持CSS3和HTML5,但仍有部分特性不完整。开发者需要测试IE9来确保渐进增强和优雅降级策略的实施。 5. **IE...
标题“CSS3 Media Query在IE9及更早版本的解决方法”所涉及的关键知识点是CSS3的媒体查询(Media Queries)以及如何在不支持媒体查询的旧版Internet Explorer(特别是IE9及以下版本)中实现兼容性。CSS3媒体查询是...
标题"让IE8和IE9支持Html5和Css3"指的是一个目标,即如何在不支持新特性的旧版IE浏览器上实现Html5和Css3功能。这个压缩包提供了一些关键的JavaScript库,帮助解决这个问题。 首先,`css3-mediaqueries.js`是针对IE...
由于其依赖于CSS3特性,因此不兼容较老的IE浏览器,但可在Chrome和Firefox等现代浏览器中正常运行。 首先,让我们来了解一下CSS3的关键特性在这个案例中的应用。这个底部导航菜单主要利用了以下几点: 1. **伪元素...
此外,JavaScript库如Respond.js可以用来为旧版IE浏览器提供对媒体查询的支持,从而改善响应式设计的兼容性。 总结来说,虽然条件注释有其特定的使用场景和优势,但作为Web开发者,应当具备了解各种兼容性解决策略...
然而,值得注意的是,尽管这些库提供了很好的兼容性,但并不能解决所有问题。某些高级CSS3特性,如渐变、阴影等,仍然需要额外的解决方案,比如使用CSS PIE等JavaScript库。此外,随着IE浏览器市场份额的逐渐减少,...
#### 三、IE6、IE7、IE8与火狐浏览器的CSS兼容性差异 1. **IE6**: - **背景色设置**:对于IE6来说,可以使用`_background`属性来单独设置背景色。 - **示例代码**:`_background: orange;` - **注意点**:由于...
为了解决这个问题,开发者们创建了`css3-mediaqueries.js`这个JavaScript库,以实现在不支持媒体查询的老版IE浏览器上的响应式布局。 `css3-mediaqueries.js`的工作原理是通过JavaScript模拟CSS3媒体查询的功能。它...
DOCTYPE html>`) 可以让IE浏览器以标准模式渲染页面,这有助于解决一些兼容性问题。 10. **媒体查询(Media Queries)**:虽然IE8及以下版本不原生支持媒体查询,但可以通过引入Modernizr或使用条件注释引入 ...
开发者需要掌握各种技巧和工具,以确保在这些旧版IE浏览器上的页面能够正常显示和功能完备。随着现代浏览器的普及,这些问题逐渐减少,但理解这些历史遗留问题有助于我们更好地构建跨浏览器兼容的网站。