当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > div+css布局必须要知道的css条件注释理论及实践

CSS样式表
CSS 表单元素不继承body的字体属性
网页制作学习教程 CSS Position
网页设计学习教程 CSS盒模型
vertical-align 表单元素垂直对齐的解决方法
不用Cookie的仿刷新二级高亮菜单
CSS3 优势以及网页设计师如何使用CSS3技术
CSS 网页制作 提高CSS可阅读性
CSS 样式表中引用图片地址在各浏览器中的差异
CSS Sprite优化 减少HTTP链接数
网页制作中应用的50个CSS技巧(国外)
CSS 英文教程 CSS语法
CSS 网页文字渐变效果
纯css 圆角实现代码
CSS 新的图像替换方法
不必需的样式脚本文件导致页面不能及时更新
CSS 约定写法 利用扩展
最全的CSS浏览器兼容问题小结
CSS 网页图文混排的10个技巧
IE的CSS制作网页技巧3则
创造100% 自适应css布局的行之有效的方法

No. « 78 79 80 81 »

技术文章搜索

关键字

CSS样式表 中的 div+css布局必须要知道的css条件注释理论及实践

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-10-12   浏览: 126 ::
收藏到网摘: n/a

浏览器的条件注释理论，用下面一段例子来解释这个问题
(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：http://www.cssplay.co.uk/menu/conditional.html
预览模型
上面提到了条件注释，就是判断浏览器类型，然后定义什么浏览器下显示什么内容。
这个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: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>

预览模型