针对IE6、7、8条件注释语句(不同版本IE显示用不用css)

最新推荐文章于 2021-06-19 03:11:15 发布

ITzhongzi

最新推荐文章于 2021-06-19 03:11:15 发布

阅读量860

点赞数

分类专栏：前端学习笔记文章标签： ie6 ie7 ie8

前端学习笔记专栏收录该内容

306 篇文章 7 订阅

订阅专栏

高级应用开发我们都会去利用if来判断用户浏览器不同版本IE显示用不用css，下面我来给大家总结一些针对IE6、7、8条件注释语句用法，希望这些方法对各位朋友有帮助。

一、条件注释简介

1.IE中的条件注释（Conditional comments）对IE的版本和IE非IE有优秀的区分能力，是WEB设计中常用的hack方法。
2.条件注释只能用于IE5以上。
3.如果你安装了多个IE，条件注释将会以最高版本的IE为标准。
4.条件注释的基本结构和HTML的注释(<!– –>)是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。
5.IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。

二、条件注释属性

gt : greater than，选择条件版本以上版本，不包含条件版本
lt : less than，选择条件版本以下版本，不包含条件版本
gte : greater than or equal，选择条件版本以上版本，包含条件版本
lte : less than or equal，选择条件版本以下版本，包含条件版本
! : 选择条件版本以外所有版本，无论高低

1、Css if hack条件语法
< !--[if IE]> Only IE <![endif]-->
仅所有的WIN系统自带IE可识别

< !--[if IE 5.0]> Only IE 5.0 <![endif]-->
只有IE5.0可以识别

< !--[if gt IE 5.0]> Only IE 5.0+ <![endif]-->
IE5.0包换IE5.5都可以识别

< !--[if lt IE 6]> Only IE 6- <![endif]-->
仅IE6可识别

< !--[if gte IE 6]> Only IE 6/+ <![endif]-->
IE6以及IE6以下的IE5.x都可识别

仅IE7可识别

< !--[if gte IE 7]> Only IE 7/+ <![endif]-->
IE7以及IE7以下的IE6、IE5.x都可识别

仅IE8可识别

仅IE9可识别

注：在 if 后加 lt gte有不同效果（参加其它参数同理）
<!–[if IE 8]> = IE8 仅IE8可识别
<!–[if lt IE 8]> = IE7或更低版本

<!–[if gte IE 8]> = 高于或者等于IE8版本
下面的代码是在非IE浏览器下运行的条件注释

您使用不是 Internet Explorer


您正在使用Internet Explorer version 6或者一个非IE 浏览器

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>DIV IF条件实例</title>
    </head>
    <body>
    你正在使用：
    
    
    

    
    <br><br>
    <strong>说明</strong>：如果你的浏览器版本为多少即会显示IE多少，针对IE6-IE9实验</body>

</html>

<!doctype html>
    <html lang="zh-CN">
    <head>
            <meta charset="UTF-8">
            <title>左栏固定宽度，右栏自适应之绝对定位法</title>
            <style type="text/css">
            body{
                    margin: 0;
            }
            #nav{
                    top: 0;
                    left: 0;
                    width: 230px;
                    height: 600px;
                    background: #ccc;
                    position: absolute;
            }
            #main{
                    height: 600px;
                    margin-left: 230px;
                    background: #0099ff;
            }
            </style>
    </head>
    <body>
            <div id="container">
                    <div id="nav">
                            左栏
                    </div>
                    <div id="main">
                            右栏
                    </div>
            </div>
    </body>
    </html>

看起来很美好，但是。。

由于左栏使用绝对定位，脱离了文档流，因此有一个缺陷，即当左栏高度大于右栏时，无法将container撑开，这个缺陷单单只看两栏布局并没有太大影响，但如果两栏布局下面有一个底栏，就会出现底栏与左栏重叠的情况：

代码如下

复制代码

    <!doctype html>
    <html lang="zh-CN">
    <head>
            <meta charset="UTF-8">
            <title>左栏固定宽度，右栏自适应之绝对定位法</title>
            <style type="text/css">
            body{
                    margin: 0;
            }
            #nav{
                    top: 0;
                    left: 0;
                    width: 230px;
                    height: 600px;
                    background: #ccc;
                    position: absolute;
            }
            #main{
                    height: 400px;
                    margin-left: 230px;
                    background: #0099ff;
            }
            #footer{
                    text-align: center;
                    background: #009000;
            }
            </style>
    </head>
    <body>
            <div id="container">
                    <div id="nav">
                            左栏
                    </div>
                    <div id="main">
                            右栏
                    </div>
            </div>
            <div id="footer">
                    底栏
            </div>
    </body>
    </html>

我们再来看看第二种方法，左栏固定宽度，右栏自适应之负margin法：

代码如下

复制代码

    <!doctype html>
    <html lang="zh-CN">
    <head>
            <meta charset="UTF-8">
            <title>左栏固定宽度，右栏自适应之负margin法</title>
            <style type="text/css">
            body{
                    margin: 0;
            }
            #container{
                    margin-left: 230px;
                    _zoom: 1;
                    /*兼容IE6下左栏消失问题*/
            }
            #nav{
                    float: left;
                    width: 230px;
                    height: 600px;
                    background: #ccc;
                    margin-left: -230px;
                    position: relative;
                    /*兼容IE6下左栏消失问题，IE6真不让人省心啊>_<*/
            }
            #main{
                    height: 600px;
                    background: #0099ff;
            }
            </style>
    </head>
    <body>
            <div id="container">
                    <div id="nav">
                            左栏
                    </div>
                    <div id="main">
                            右栏
                    </div>
            </div>
    </body>
    </html>

这样无论两栏的高度如何变化都不会有问题了：

代码如下

复制代码

    <!doctype html>
    <html lang="zh-CN">
    <head>
            <meta charset="UTF-8">
            <title>左栏固定宽度，右栏自适应之负margin法</title>
            <style type="text/css">
            body{
                    margin: 0;
            }
            #container{
                    margin-left: 230px;
                    _zoom: 1;
                    /*兼容IE6下左栏消失问题*/
            }
            #nav{
                    float: left;
                    width: 230px;
                    height: 600px;
                    background: #ccc;
                    margin-left: -230px;
                    position: relative;
                    /*兼容IE6下左栏消失问题，IE6真不让人省心啊>_<*/
            }
            #main{
                    height: 400px;
                    background: #0099ff;
            }
            #footer{
                    clear: both;
                    text-align: center;
                    background: #009000;
            }
            </style>
    </head>
    <body>
            <div id="container">
                    <div id="nav">
                            左栏
                    </div>
                    <div id="main">
                            右栏
                    </div>
            </div>
            <div id="footer">
                    底栏
            </div>
    </body>
    </html>

在css中要实现首字下沉其实很简单我们只要结合float与font-size的大小即可实现首字下沉了，下面我来举几个有意思的实例。

先看个实例上代码。应用到你要沉的那个字就ok了。

例1

代码如下	复制代码
.first { font-size:320%; /字体百分比增大/ float:left; /左浮动/ }

分析：

1.字体增大。

2.左浮动，然后下一行的就提上来了

例2

代码如下	复制代码
.menglong,.menglong2,.menglong3 { width:300px; border:1px solid #ddd; padding:5px; font-size:12px; margin:5px 0; } .menglong:first-line { color:red; } .menglong:first-letter { font-size:350%; font-weight:bold; color:#000; float:left; } .menglong2:first-line { letter-spacing:-2px; } .menglong3{ text-indent:2em; }

html代码：

代码如下

复制代码

<!doctype html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="utf-8">
<title>CSS首字下沉</title>
</head>
<body>
<div class="menglong">2 some sinking and discoloration2 some sinking and discoloration2 some sinking and discoloration2 some sinking and discoloration</div>
<div class="menglong">首字下沉及第一行变色首字下沉及第一行变色首字下沉及第一行变色首字下沉及第一行变色首字下沉及第一行变色首字下沉及第一行变色</div>
<div class="menglong2">首行缩进，距离更紧密的.首行缩进，距离更紧密的首行缩进，距离更紧密的首行缩进，距离更紧密的首行缩进，距离更紧密的首行缩进，距离更紧密的</div>
<div class="menglong3">段落首行空两格的。段落首行空两格的。段落首行空两格的。段落首行空两格的。段落首行空两格的。段落首行空两格的。段落首行空两格的。</div>
</body>
</html>