html5作為今天最新的網(wǎng)頁(yè)開(kāi)發(fā)標(biāo)準(zhǔn),已經(jīng)得到了廣泛的運(yùn)用,并且具有更加完善的瀏覽器支持。但是,由于舊版本瀏覽器的存在,我們依然需要考慮兼容性問(wèn)題。
下面我們將給出一些在HTML5中使用的一些標(biāo)簽和屬性,以及如何在不同瀏覽器中進(jìn)行兼容處理的代碼。
1. 新增的標(biāo)簽 在HTML5中新增了很多語(yǔ)義化的標(biāo)簽,如header、footer、nav、section等等。但是在IE8及以下版本的瀏覽器會(huì)識(shí)別不了這些標(biāo)簽,因此需要使用以下代碼: <!--[if lte IE 8]> <script> document.createElement('header'); document.createElement('footer'); document.createElement('nav'); document.createElement('section'); </script> <![endif]-->
2. 媒體標(biāo)簽 在HTML5中,媒體標(biāo)簽可以幫助我們更加方便地插入音頻、視頻等多媒體內(nèi)容。但是在一些老的瀏覽器中,這些標(biāo)簽并不支持,因此需要使用以下代碼: <video src="movie.avi"> <object data="movie.avi"></object> <embed src="movie.avi"></embed> </video>
3. 屬性 HTML5中有些新的屬性,例如placeholder、required等等。但是在一些老的瀏覽器中,這些屬性會(huì)被忽略掉,因此需要使用以下代碼: $('input[placeholder]').each(function(){ var $placeInput = $(this), placeText = $placeInput.attr('placeholder'); if(!$placeInput.val()){ $placeInput.val(placeText); } $placeInput.focus(function(){ if($placeInput.val() == placeText){ $placeInput.val(''); } }); $placeInput.blur(function(){ if($placeInput.val() == ''){ $placeInput.val(placeText); } }); });
綜上所述,HTML5具有很多新的特性,并且得到了廣泛的運(yùn)用。但是在兼容性上還是需要考慮今天多瀏覽器的存在,通過(guò)使用以上方法可以有效地解決這個(gè)問(wèn)題。