关于IE8下media query兼容的解决方案探讨

最新推荐文章于 2018-10-24 09:51:41 发布
最新推荐文章于 2018-10-24 09:51:41 发布
阅读量63 收藏
点赞数
原文链接：http://www.cnblogs.com/kidsitcn/p/5276145.html
版权

在国内IE8至少还占有20%的市场份额，所以在做网站时，必须得为这部分用户特殊兼容考虑。

一方面IE8上面很多css3定义的标签不能使用，另外一方面javascript的addEventListener不能使用，还有重要的一点就是media query不能使用。

幸运的是，国外respond.js为解决这个棘手的问题提供了比较好的思路，下面就探讨一二。

具体参考 http://mux.alimama.com/posts/686

 

转载于:https://www.cnblogs.com/kidsitcn/p/5276145.html

weixin_33887443
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery media iframe 内动态显示pdf(兼容ie各个版本 ，火狐，谷歌)
。。。专栏
07-29 6970
pdf 在线预览插件 .selector{ width:1000px; height: 100px; background-color:blue; } next prev var next = function(){ var url = "spark.pdf" $(window.parent.docume
让@media screen兼容ie8/ie7/ie6
03-09
Respond.js让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持媒介查询，亲测可用。（注意：需要大家放到服务器上再使用，不能跨域使用，放到虚拟空间中也可以进行测试，本地测试ie6-8无效果）
ie8 不支持media
weixin_33696106的博客
02-17 300
可以用respond.js库解决，bootstrap文件夹里有。同时需要注意以下几点。 1、需要启动本地服务器（localhost），不能使用普通本地的url地址（file://开头）； 2、需要外部引入CSS文件，将CSS样式书写在style中是无效的； 3、由于respond插件是查找CSS文件，再进行处理，所以respond文件一定要放置在CSS文件的后面 4、另外，虽然把res...
jquery media插件 在线显示pdf （兼容ie 各个版本 ，火狐，谷歌）
07-29
jquery media插件
ie8以下浏览器不兼容jquery解决方案
08-14
ie8以下浏览器不兼容jquery解决方案
css3-mediaqueries兼容ie8的解决方法
11-27
IE8及低版本浏览器不支持CSS3 media queries的解决方法
video.js 在ie8 上的兼容demo（附 html5media）
11-07
总结来说，`video.js` 结合 `html5media` 的使用，能够有效地解决在IE8等老版本浏览器中的HTML5视频播放问题，提供一致的用户体验。开发者只需要关注视频内容和播放器的交互设计，无需过于担忧浏览器的兼容性问题。...
html5media文件，video兼容IE8视频播放
04-27
`html5media` 是一个JavaScript库，其目标是解决HTML5 Video在旧版浏览器，特别是像Internet Explorer 8（IE8）这样的老版本浏览器中的兼容性问题。IE8并不原生支持HTML5的`<video>`标签，因此`html5media`库通过...
IE8兼容video
12-04
6. **样式兼容**: 考虑到IE8的CSS兼容性问题，可能需要使用条件注释或者专门针对IE8的CSS Hack来确保视频播放器的样式在IE8下正常显示。 7. **回退策略**: 设计合理的回退策略，当用户无法播放视频时，提供一个替代...
border-radius IE8兼容处理的方法
11-21
2. IE8不支持媒体查询（media query），这意味着响应式设计在IE8上可能表现不佳。对于这种情况，可以考虑使用条件注释或JS库来实现简单的响应式布局。 总的来说，要让`border-radius` 在IE8上工作，开发者需要结合...
media query ie8- 兼容实现总结
hsany330的专栏
06-21 3137
虽然说响应式设计的理想状态是，需对pc/移动各种终端进行响应；但是现实是高分辨率的pc端与手机终端屏幕相差太大，像电商这样有大量图片和文字信息的同时排版要求精准的页面，设计一个同时适应高分辨率pc又适合小尺寸的手机终端是挑战；同时高分辨率下pc页面信息量巨大，对于手机端用户是否需要，也许会造成带宽浪费;再者手机终端和pc终端的用户操作习惯也相差甚大，这种多图多信息量要求精准的页面，设计出来恐怕会是
IE8及低版本浏览器不支持CSS3 media queries的解决方法
热门推荐
瑞风轻拂
03-06 3万+
最近在解决UI问题时碰到以下浏览器不兼容性问题（本人属于UI业余操作者，很多想法就很业余了）： 问题：IE8及其以下低版本IE浏览器在缩小窗口时，UI没有按照相应的要求显示窗口缩小时对应的布局；其他浏览器正常。 定位过程： 其实开始拿到问题时是无从下手，不知所以然，根本就没听说还有media这个CSS属性，就更不知道它的功能了。但是对于解决UI问题，有自己的一套思路，就是首先要思考为什么会错
@media 兼容ie8-CSS3响应式布局（@media screen）兼容IE6-8的方法 （IE9以下）
小熊猫
10-24 4483
最近做了一个响应式网站，主要用到了CSS3里的@media screen，今天无意用IE8打开发现网站竟然不正常，才知道原来IE8不兼容响应式@media screen呢。下面跟大家分享下青岛星网的解决方法。 我看了下IE6-IE8下加载网站，网站不能正常显示的主要原因就是没有加载成功CSS，也就是说IE6-IE8不识别CSS3里面@media screen。 既然是无法加载CSS，那么让IE...
HTML5 respond.js 解决IE6~8的响应式布局问题
yunshanweb的博客
08-03 659
响应式布局，理想状态是，对PC/移动各种终端进行响应。媒体查询的支持程度是IE9+以及其他现代的浏览器，但是IE8在市场当中仍然占据了比较大量的市场份额，使我们不得不进行IE低端浏览器的考虑。那么如何在IE6~8浏览器中兼容响应式布局呢？这里我们需要借助这样一个文件：respond.js。文件下载地址：https://github.com/scottjehl/Respond（或者百度搜索respo
让IE8支持@media query
Happybrother的专栏
11-30 1296
方法一：polyfill Respond.js方法二：css hack @media \0screen {} 写在@media \0screen {} 中的代码只会在IE8中执行，其他浏览器会忽略这些代码注：推荐使用方法一
媒体查询media参数以及其兼容性问题
NineTeen
10-26 1万+
一、设置meta标签 在使用媒体查询media之前我们需要先设置meta标签，对设备的缩放等参数进行设定。 参数解释： width=device-width   宽度等于当前设备宽度 initial-scale=1 初始缩放比例，默认为1 minmum-scale=1 允许用户缩放到的最小比例，默认为1 maxmum-scale=1 允许用户缩放到的最大比
IE8兼容@media和mp4视频的解决方案
weixin_33893473的博客
09-02 919
IE8不支持css3的@media查询，解决方法是引入respond.js 相关链接：https://www.bootcdn.cn/respond.js/ <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.js"></script> 同样的IE8也不支持HTML5的视频功能，解决方法是引入htm...
关于IE8以及以下版本不支持媒体查询的解决方案
blacider的博客
05-05 1万+
众所周知，网页前端开发时兼容IE一直是很头疼的问题。今天接到一个需要响应式布局的问题，主要还要兼容IE8，9。在网上搜索了以下解决方案，现记录如下。   首先，加入代码 [if lt IE 9]> --> 以解决IE8及以下不支持媒体查询。它通过js来hack IE浏览器。
bootstrap ie8兼容
最新发布
05-23
为了使Bootstrap在IE8中正常工作，需要进行以下操作： 1. 下载并引入 Respond.js 和 html5shiv.js 文件。 2. 在HTML文档的head中添加以下代码： ``` <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--> ``` 3. 在CSS文件的顶部添加以下代码： ``` @media screen and (min-width:1200px) { /* IE8 and lower do not support media queries for width */ .container { width: 1170px; } } ``` 这些步骤应该可以解决Bootstrap在IE8中的兼容性问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值