@media 兼容ie8-CSS3响应式布局(@media screen)兼容IE6-8的方法 (IE9以下)

最近做了一个响应式网站,主要用到了CSS3里的@media screen,今天无意用IE8打开发现网站竟然不正常,才知道原来IE8不兼容响应式@media screen呢。下面跟大家分享下青岛星网的解决方法。

我看了下IE6-IE8下加载网站,网站不能正常显示的主要原因就是没有加载成功CSS,也就是说IE6-IE8不识别CSS3里面@media screen。

既然是无法加载CSS,那么让IE6-IE8能加载CSS问题就解决了。我们用注释不同的浏览器版本不就解决了吗。
CSS3响应式布局IE6-IE8的兼容解决代码如下
 

<!--[if lte IE 9]>
<link href="/style/mmstyle2.css" rel="stylesheet" type="text/css" />
<![endif]-->

意思就是:在IE6-IE9浏览器上加载mmstyle2.css这个CSS文件。超简单吧鞋同们。

下面给大家讲下IE浏览器注释的使用

先看一下lt,lte,gt,gte分别表示什么 
lt:小于当前版本 
lte:小于或等于当前版本,包括本身 
gt:大于当前版本 
gte:大于或等于当前版本,包括本身

下面是IE浏览器不同版本的注释介绍。

<!--[if IE]>只有IE6,7,8,9浏览器显示(IE10标准模式不支持)<hr/><![endif]-->
<!--[if !IE]><!-->只有非IE浏览器显示(不包括IE10)<hr/><!--><![endif]-->
<!--[if IE 9]>IE9浏览器显示<hr/><![endif]-->
<!--[if IE 8]>IE8浏览器显示<hr/><![endif]-->
<!--[if IE 7]>IE7浏览器显示<hr/><![endif]-->
<!--[if IE 6]>IE6浏览器显示<hr/><![endif]-->
<!--[if lt IE 10]>IE10以下版本浏览器显示(不包括IE10)<hr/><![endif]-->
<!--[if lte IE 9]>IE9及IE9以下版本浏览器显示(包括IE9)<hr/><![endif]-->
<!--[if gt IE 6]>IE6以上版本浏览器显示(不含IE6)<hr/><![endif]-->
<!--[if gte IE 7]>IE7及IE7以上版本浏览器显示(包含IE7)<hr/><![endif]-->

转:http://www.qdxw.net/xwhtml/372.html

posted @ 2018-10-24 09:52  离。  阅读(77)  评论(0编辑  收藏  举报