在线
客服

在线客服
尊敬的客户,我们24小时竭诚为您服务 公司总机: 0755-83312037 (32条线)

客服
热线

0755-83312037 (32条线)
7*24小时客服服务热线

?

关注
微信

关注官方微信

返回
顶部

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

发布时间:2019-04-13浏览次数:284
<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>