如何讓h5、css3的新屬性在ie8以下的版本兼容

導入谷歌的html5shiv包,這也是我看過很多網站的教程,他們力主推薦的方法

1)在head當中引入<script type="text/javascript" ?src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>

當然這個地址有很多,你也可以直接把它down下來,有些地址沒有作用。這里注意的一點就是這個js文件必須放在head當中,不能放在其他的位置,否則會是失效,這樣做的目的是因為ie必須在解析元素前知道這個,我試過放在其他的位置無效

2)在css里面添加這段代碼article,aside,dialog,footer,header,section,footer,nav,figure,menu{display:block},原因是因為這些新屬性h5當中默認為內聯元素,現在我們將它轉化塊狀元素


關鍵代碼截圖,所有的布局用的都是h5的新標簽


ie8以下的瀏覽器都兼容

并不是所有的ie9以下的版本都支持h5的新屬性,比如說舉個例子,h5的canvas


旁邊那個紅色的塊就是canvas畫出來的

看看在ie8下面的結果


canvas并沒有效果

css3的屬性怎么在ie8以下支持,比如border-radius、box-shadow、text-shadow

http://www.zhangxinxu.com/wordpress/2010/04/讓ie6ie7ie8瀏覽器支持css3屬性/參照下張鑫旭的日志,用一個包ie-css3.htc,里面寫得很詳細了

用還是比較簡單的

.box {

-moz-border-radius: 15px; /* Firefox */

-webkit-border-radius: 15px; /* Safari 和 Chrome */

border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE瀏覽器 */

-moz-box-shadow: 10px 10px 20px #000; /* Firefox */

-webkit-box-shadow: 10px 10px 20px #000; /* Safari 和 Chrome */

box-shadow: 10px 10px 20px #000; /* Opera 10.5+, 以及使用了IE-CSS3的IE瀏覽器 */

behavior: url(ie-css3.htc); /* 通知IE瀏覽器調用腳本作用于'box'類,直接引入了 */

}


ie10效果
ie7顯示的效果


我的建議啊,如果非要用這個樣式不可并且頁面需要用得地方比較多可以導入外部文件,不然我覺得沒有必要,在簡單的頁面內引入多個外部文件是會拖慢瀏覽器的加載速度的,

還要說句ie8以下的瀏覽器最好不要做響應式設計,如果用了bootstarp框架的話,可以去除響應式,顧官網有詳細的介紹


這么幾步走

看到這里,你沒有問題嗎,你說h5的新屬性兼容ie以下的版本,h5的新屬性不止那么些吧,還有什么cavas、表單呢,哈哈,網上有大神針對這些問題提出了解決方案,如


解決辦法,引入excanvs.js,又是別人的東西,以后要自己寫啊

我是一名搬運工,我是一名搬運工,我是一名搬運工,我是一名搬運工,我是一名搬運工,我是一名搬運工,我是一名搬運工,我是一名搬運工,我是一名搬運工,我是一名搬運工

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容