@media 相容ie8-CSS3響應式佈局(@media screen)相容IE6-8的方法 (IE9以下)
阿新 • • 發佈:2018-11-29
最近做了一個響應式網站,主要用到了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]-->