位置: 编程技术 - 正文
css条件注释理论及实践源文件(css中注释的写法)
编辑：rootadmin浏览器的条件注释理论，用下面一段例子来解释这个问题 (X)HTML 下面一段代码是测试在微软的IE浏览器下的条件注释语句的效果 <!--[if IE]> <h1>您正在使用IE浏览器</h1> <![endif]--> <!--[if IE 5]> <h1>版本 5</h1> <![endif]--> <!--[if IE 5.0]> <h1>版本 5.0</h1> <![endif]--> <!--[if IE 5.5]> <h1>版本 5.5</h1> <![endif]--> <!--[if IE 6]> <h1>版本 6</h1> <![endif]--> <!--[if IE 7]> <h1>版本 7</h1> <![endif]--> 下面的代码是在非IE浏览器下运行的条件注释 <!--[if !IE]><!--> <h1>您使用不是 Internet Explorer</h1> <!--<![endif]--> 最终在非IE和特殊的IE浏览器下起作用 (或者使用 lte lt 或者 gt gte来判断，如： <!--[if lte IE 6]> 在IE 6下显示的信息 <![endif]--> ). <!--[if IE 6]><!--> <h1>您正在使用Internet Explorer version 6<br /> 或者 一个非IE 浏览器</h1> <!--<![endif]--> From：cssplay.co.uk/menu/conditional.html" target="_blank"> 上面提到了条件注释，就是判断浏览器类型，然后定义什么浏览器下显示什么内容。 这个dropmenu（下拉菜单）模型来自cssplay，使经过作者多次的研究和反复的测试才做出来的。我想那这个模型来实践一下条件注释的原理。 先看一个最简单的模型 下面是xhtm <div class="menu"> <ul> <li><a class="drop" href="../menu/index.html">DEMOS <!--[if IE 7]><!--> </a> <!--<![endif]--> <!--IE7时显示</a>标签--> <table><tr><td> <ul> <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars advertising page</a></li> <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text around images</a></li> <li><a href="../menu/form.html" title="Styling forms">styled form</a></li> <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li> <li><a class="drop" href="../menu/hover_click.html" title="Hover/click with no active/focus borders">hover/click with no borders</li> <li class="upone"><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li> <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map for detailed information</a></li> <li><a href="../menu/bodies.html" title="fun with background images">fun with background images</a></li> <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li> <li><a href="../menu/em_images.html" title="em size images compared">em image sizes compared</a></li> </ul> </td></tr></table> <!--[if lte IE 6]> </a> <![endif]--> </li> <!--IE6时显示</a>标签--> </ul> </div> CSS <link rel="stylesheet" media="all" type="text/css" href="final_drop.css" /> <!--[if lte IE 6]> <link rel="stylesheet" media="all" type="text/css" href="final_drop_ie.css" /> <![endif]--> 采用双样式，给ie和非ie分别定义样式，如果IE时候，在final_drop.css基础上补充一个final_drop_ie.css 先看看非ie下的css是怎样定义的 .menu ul li ul { display: none; } /* specific to non IE browsers */ .menu ul li:hover a { color:#fff; background:#bd8d5e; } /*定义鼠标滑过样式*/ .menu ul li:hover ul { display:block; position:absolute; top:3em; margin-top:1px; left:0; width:px; } 在非IE下，看到鼠标滑过时候li包含的ul显示了，因为这些浏览器支持li:hover用法 IE下的css .menu ul li a:hover { color:#fff; background:#bd8d5e; } /*当鼠标滑过时li包含的ul显示*/ .menu ul li a:hover ul { display:block; position:absolute; top:3em; left:0; background:#fff; margin-top:0; margin-top:1px; } 继承上面的final_drop.css样式，无鼠标时间时候li包含的ul不显示 因为 <!--[if lte IE 6]> </a> <![endif]--> 所以在IE6下鼠标滑过时候在通过a:hover来显示那个ul内容 而IE7下通过li:hover显示的效果一样 
推荐整理分享css条件注释理论及实践源文件(css中注释的写法)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:css的注释语句标记,css 条件,css的注释标记是什么,css中注释的写法,css的注释标记是什么,css的注释,css的注释,css的注释语句写法是怎样的,内容如对您有帮助，希望把文章链接给更多的朋友！
CSS条件注释的使用详解教材 声明：以下内容收集于网络，经才子理解后，加以整理编辑，转载请保留才子小站的链接，谢谢！！！才子手记：
个优秀CSS网站（3月精选） ){this.resized=true;this.style.width=;}">从这些CSSGallery网站中精选了个比较漂亮的XHTML＋CSS布局网站，推荐给喜欢网页设计的人，无论是做博客模板还是做
position:relative/absolute无法冲破的等级 注：本文实例在IE5.x下可能会显示不出来，请使用IE6、IE7、Firefox、Opera等浏览器来调试！前段时间记得好像是谁在群里提出了一个实在是让大家都觉得
标签: css中注释的写法
本文链接地址:https://www.jiuchutong.com/biancheng/371950.html 转载请保留说明！
