您现在的位置是:门户> 编程语言> HTML/CSS

css条件注释理论及实践源文件
2020-04-07 27人围观 0条评论
简介css条件注释理论及实践源文件
    浏览器的条件注释理论,用下面一段例子来解释这个问题

    (X)HTML

    下面一段代码是测试在微软的IE浏览器下的条件注释语句的效果


    您正在使用IE浏览器


    版本 5


    版本 5.0


    版本 5.5


    版本 6


    版本 7


    下面的代码是在非IE浏览器下运行的条件注释


    您使用不是 Internet Explorer



    • zero dollars advertising page

    • wrapping text around images

    • styled form

    • active focus

    • hover/click with no borders

    • shadow boxing
    • image map for detailed information

    • fun with background images

    • fade scrolling

    • em image sizes compared













CSS





采用双样式,给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
.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;
marg\in-top:1px;
}

继承上面的final_drop.css样式,无鼠标时间时候li包含的ul不显示
因为



所以在IE6下鼠标滑过时候在通过a:hover来显示那个ul内容
而IE7下通过li:hover显示的效果一样
分享:

文章评论