HTML5代码示例:渐进增强版html

发布时间：2019-04-13浏览次数：1020 <p> </p> <table style="BORDER-RIGHT: #cccccc 1px dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellspacing="0" cellpadding="6" width="95%" align="center" border="0"><tbody><tr> <td style="WORD-WRAP: break-word" bgcolor="#fdfddf"> <font color="#ff0000">网页制作Webjx文章简介：</font><font color="#000000">渐进增强版html.</font> </td> </tr></tbody></table> <pre class="code">&lt;!DOCTYPE HTML&gt; &lt;!--[if !IE]&gt;&lt;!--&gt;&lt;html lang="zh-cn"&gt;&lt;!--&lt;![endif]--&gt; &lt;!--[if gt IE 9]&gt;&lt;html class="ie10" lang="zh-cn"&gt;&lt;![endif]--&gt; &lt;!--[if IE 9]&gt;&lt;html class="ie9 lte9" lang="zh-cn"&gt;&lt;![endif]--&gt; &lt;!--[if IE 8]&gt;&lt;html class="ie8 lte9 no-css3" lang="zh-cn"&gt;&lt;![endif]--&gt; &lt;!--[if IE 7]&gt;&lt;html class="ie7 lte9 lte7 no-css3" lang="zh-cn"&gt;&lt;![endif]--&gt; &lt;!--[if lte IE 6]&gt;&lt;html class="ie6 lte9 lte7 no-css3" lang="zh-cn"&gt;&lt;![endif]--&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p>这个其实有好几种不同的版本，按个人的需求来定吧，本人在不同阶段也使用了不同的版本，最终确认为这个版本。其中.no-css3用来表示ie6-8不支持css3的样式，对于渐进增加方面，可以高级浏览器使用css3，ie6-8使用.no-css3这个class来定位使用背景图片，而对于ie8支持的:before和:after生成的三角，则可以使用.lt7来表示ie7及ie6使用背景图片。</p> <p>再次更新下，因为考虑到国内浏览器还是ie6比较多，所以把顺序排列了下，然后只针对非ie6,7,8进行判断</p> <pre class="code">&lt;!DOCTYPE HTML&gt; &lt;!--[if lte IE 6]&gt;&lt;html class="ie6 lte7 no-css3" lang="zh-cn"&gt;&lt;![endif]--&gt; &lt;!--[if IE 8]&gt;&lt;html class="ie8 no-css3" lang="zh-cn"&gt;&lt;![endif]--&gt; &lt;!--[if IE 7]&gt;&lt;html class="ie7 lte7 no-css3" lang="zh-cn"&gt;&lt;![endif]--&gt; &lt;!--[if !(IE 6) | !(IE 7) | !(IE 8) ]&gt;&lt;!--&gt;&lt;html lang="zh-cn"&gt;&lt;!--&lt;![endif]--&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p>添加ie9，把no-css3 class改成lte8</p> <pre class="code">&lt;!DOCTYPE HTML&gt; &lt;!--[if IE 6]&gt;&lt;html class="ie6 lte9 lte8 lte7" lang="zh-cn"&gt;&lt;![endif]--&gt; &lt;!--[if IE 8]&gt;&lt;html class="ie8 lte9 lte8" lang="zh-cn"&gt;&lt;![endif]--&gt; &lt;!--[if IE 9]&gt;&lt;html class="ie9 lte9" lang="zh-cn"&gt;&lt;![endif]--&gt; &lt;!--[if IE 7]&gt;&lt;html class="ie7 lte9 lte8 lte7" lang="zh-cn"&gt;&lt;![endif]--&gt; &lt;!--[if !(IE 6) | !(IE 7) | !(IE 8) | !(IE 9) ]&gt;&lt;!--&gt;&lt;html lang="zh-cn"&gt;&lt;!--&lt;![endif]--&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;/body&gt; &lt;/html&gt;</pre>