HTML5新的語意標籤儘管有很多的好處,但是在低版本的老IE瀏覽器中還是存在兼容性問題的,常常讓人感到頭疼,到底是大膽的使用新標籤還是使用傳統的大量的DIV無義標籤?今天就簡單的來看看H5新標籤的兼容性處理方式。
首先來看一小段簡單的程式碼:
HTML程式碼:
测试H5新标签兼容性 header
Google瀏覽器下:
IE6瀏覽器下:
很明顯,header和footer在支援H5新標籤的瀏覽器下已區塊級元素呈現,而在IE8及以下的瀏覽器中以文字呈現並且樣式沒有起作用,說明不被支持,那該如何解決呢?
首先,第一種方法便是使用DOM操作來新增這些標籤,既然瀏覽器不支持,那我自己來建立一個:
HTML程式碼:
测试H5新标签兼容性 header
這時候,我們再來看看IE6瀏覽器顯示的效果:
#紅色的背景色可以顯示出來了,說明透過document.createElement ()這方法是可行的,那為什麼樣式的寬高不起作用呢?因為加入的元素是內嵌元素,內嵌元素是沒有寬高的,在了解這一點以後,我們再給案例中的header和footer加上一個"display: block;"屬性,看看效果會有什麼改變。
IE6瀏覽器顯示的效果:
現在顯示的效果跟我們需要的就完全一樣了,也就是說透過這種方法可以解決H5新標籤在舊IE瀏覽器中的相容問題。但是,另外一個問題,那麼多的新標籤,如果每個都要透過這種方法去生產的話,是不是太麻煩了呢?
所以,我們現在介紹第二種方式,直接借用前輩大牛封裝好的js庫--- html5shiv.js
HTML程式碼:
测试H5新标签兼容性 header
那我們現在直接開啟IE6瀏覽器看效果:
完全可以實現我們想要的效果,而且操作更加的簡單,程式碼量更少,大家不妨也可以在IE7和IE8瀏覽器中也測試一下。
以上是詳細介紹HTML5新標籤的兼容性處理(圖)的詳細內容。更多資訊請關注PHP中文網其他相關文章!