HTML5----IE低版本支持HTML5标签方法,css 浏览器网页兼容性

IE低版本需要支持HTML5标签:

方法1.传统引入js包

<!--[if IE]><script src="style/js/html5.js"></script><![endif]-->


注:js包(html5.js)内容:

// html5shiv MIT @rem remysharp.com/html5-enabling-script
// iepp v1.6.2 MIT @jon_neal iecss.com/print-protector
/*@cc_on(function(m,c){var z="abbr|article|aside|audio|canvas|details|figcaption|figure|footer|header|hgroup|mark|meter|nav|output|progress|section|summary|time|video";function n(d){for(var a=-1;++a<o;)d.createElement(i[a])}function p(d,a){for(var e=-1,b=d.length,j,q=[];++e<b;){j=d[e];if((a=j.media||a)!="screen")q.push(p(j.imports,a),j.cssText)}return q.join("")}var g=c.createElement("div");g.innerHTML="<z>i</z>";if(g.childNodes.length!==1){var i=z.split("|"),o=i.length,s=RegExp("(^|\\s)("+z+")",
"gi"),t=RegExp("<(/*)("+z+")","gi"),u=RegExp("(^|[^\\n]*?\\s)("+z+")([^\\n]*)({[\\n\\w\\W]*?})","gi"),r=c.createDocumentFragment(),k=c.documentElement;g=k.firstChild;var h=c.createElement("body"),l=c.createElement("style"),f;n(c);n(r);g.insertBefore(l,
g.firstChild);l.media="print";m.attachEvent("onbeforeprint",function(){var d=-1,a=p(c.styleSheets,"all"),e=[],b;for(f=f||c.body;(b=u.exec(a))!=null;)e.push((b[1]+b[2]+b[3]).replace(s,"$1.iepp_$2")+b[4]);for(l.styleSheet.cssText=e.join("\n");++d<o;){a=c.getElementsByTagName(i[d]);e=a.length;for(b=-1;++b<e;)if(a[b].className.indexOf("iepp_")<0)a[b].className+=" iepp_"+i[d]}r.appendChild(f);k.appendChild(h);h.className=f.className;h.innerHTML=f.innerHTML.replace(t,"<$1font")});m.attachEvent("onafterprint",
function(){h.innerHTML="";k.removeChild(h);k.appendChild(f);l.styleSheet.cssText=""})}})(this,document);@*/


方法2.在hmtl 加入(推荐)

/*html5 tag*/
<!--[if lt IE 9]>
	    <script>(function(tags){for(var i=0; i<tags.length; i++)document.createElement(tags[i]);})(["article","aside","details","figcaption","figure","footer","header","hgroup","nav","section","menu","video"]);</script>
<![endif]-->


什么是浏览器兼容:

当我们使用不同的浏览器(Firefox IE7 IE6)访问同一个网站,或者页面的时候,会出现一些不兼容的问题,有的显示出来正常,有的显示出来不正常,我们在编写CSS的时候会很恼火,刚修复了这个浏览器的问题,结果另外一个浏览器却出了新问题。而兼容就是一种办法,能让你在一个CSS里面独立的写支持不同浏览器的样式。这下就和谐了!

有一点逻辑思想的人都会知道可以用IE和FF的兼容结合起来使用。

下面介绍三个兼容,例如:(适合新手,呵呵,高手路过。)

_height:100px; //ie6
*height:100px;  //ie7    一般放在ie6前面
height:100px \9\0;  //ie9
-moz-height:100px    //ff
-webkit-height:100px   //-webkit- 浏览器引擎:Safari,chrome,qq,opers....

IEif条件Hack

1. 〈!--[if !IE]〉〈!--〉 除IE外都可识别 〈!--〈![endif]--〉 
2. 〈!--[if IE]〉 所有的IE可识别 〈![endif]--〉 
3. 〈!--[if IE 5.0]〉 只有IE5.0可以识别 〈![endif]--〉 
4. 〈!--[if IE 5]〉 仅IE5.0与IE5.5可以识别 〈![endif]--〉 
5. 〈!--[if gt IE 5.0]〉 IE5.0以及IE5.0以上版本都可以识别 〈![endif]--〉 
6. 〈!--[if IE 6]〉 仅IE6可识别 〈![endif]--〉 
7. 〈!--[if lt IE 6]〉 IE6以及IE6以下版本可识别 〈![endif]--〉 
8. 〈!--[if gte IE 6]〉 IE6以及IE6以上版本可识别 〈![endif]--〉 
9. 〈!--[if IE 7]〉 仅IE7可识别 〈![endif]--〉 
10. 〈!--[if lt IE 7]〉 IE7以及IE7以下版本可识别 〈![endif]--〉 
11. 〈!--[if gte IE 7]〉 IE7以及IE7以上版本可识别 〈![endif]--〉


:gt = Great Then 大于 

= 〉 大于号 

lt = Less Then 小于 

= 〈 小于号 

gte = Great Then or Equal 大于或等于 

lte = Less Then or Equal 小于或等于




  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值