下面是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:150px; }
在非IE下,看到鼠标滑过时候li包含的ul显示了,因为这些浏览器支持li:hover用法
IE下的css
点击运行可以看到效果: [Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
继承上面的final_drop.css样式,无鼠标时间时候li包含的ul不显示
因为
<!--[if lte IE 6]>
</a>
<![endif]-->
所以在IE6下鼠标滑过时候在通过a:hover来显示那个ul内容
而IE7下通过li:hover显示的效果一样
下面是作者的原模型(三级菜单纵向和相结合的)
就是在简单模型的基础上复杂化
预览模型 下载相关文件:
http://www.jluvip.com/works/css/dropmenu/dropmenu.txt
http://www.jluvip.com/works/css/dropmenu/final_drop.css
http://www.jluvip.com/works/css/dropmenu/final_drop_ie.css
补充条件注释 条件注释是在IE5.0/Win以后才被IE支持的,一般用于hack。
(X)HTML
下面一段代码是测试在微软的IE浏览器下的条件注释语句的效果
<!--[if IE]> 根据条件判断,这是Internet Explorer<br /> < ![endif]--> <!--[if IE 5]> 根据条件判断,这是Internet Explorer 5<br /> < ![endif]--> <!--[if IE 5.0]> 根据条件判断,这是Internet Explorer 5.0<br /> < ![endif]--> <!--[if IE 5.5]> 根据条件判断,这是Internet Explorer 5.5<br /> < ![endif]--> <!--[if IE 6]> 根据条件判断,这是Internet Explorer 6<br /> < ![endif]--> <!--[if IE 7]> 根据条件判断,这是Internet Explorer 7<br /> < ![endif]--> <!--[if gte IE 5]> 根据条件判断,这是Internet Explorer 5 或者更高<br /> < ![endif]--> <!--[if lt IE 6]> 根据条件判断,这是版小于6的Internet Explorer<br /> < ![endif]--> <!--[if lte IE 5.5]> 根据条件判断,这是Internet Explorer 5.5或更低<br /> < ![endif]-->
下面的代码是在非IE浏览器下运行的条件注释
<!--[if !IE]><!--> 您使用不是 Internet Explorer<br /> <!--<![endif]--> <!--[if IE 6]><!--> 您正在使用Internet Explorer version 6<br /> 或者 一个非IE 浏览器<br /> <!--<![endif]-->
下面是条件注释的语法:
gt /Greater than/大于/<!--[if gt IE 5.5]>
gte /Greater than or equal to/大于等于/<!--[if gte IE 5.5]>
lt /Less than/小于/<!--[if lt IE 5.5]>
lte /Less than or equal to/小于等于/<!--[if lte IE 5.5]>
! /Note/不等于/<!--[if !IE 5.5]> IE条件注释的优秀的区分浏览器的能力,让很多设计师用于hack,解决浏览器对CSS解析的不同
<!--[if IE6.0]] <style type="text/css"> div#box{width:500px;margin:10px; padding:10px; border:10px;} </style> <![endif]--> <!--[if lt IE6.0]] <style type="text/css"> div#box{width:530px;margin:10px; padding:10px; border:10px;} </style>
预览模型
文章评论
共有 位脚本之家网友发表了评论我来说两句