針對IE6、7、8條件註釋語句(不同版本IE顯示用不用css)

ITzhongzi發表於2017-05-20
CSS
高階應用開發我們都會去利用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都可識別
 

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

<!--[if IE 8]> Only IE 8/- <![endif]-->
僅IE8可識別
 

<!--[if IE 9]> Only IE 9/- <![endif]-->
僅IE9可識別

 
注：在 if  後加 lt gte有不同效果 （參加其它引數同理）
<!–[if IE 8]> = IE8 僅IE8可識別
<!–[if lt IE 8]> = IE7或更低版本

<!–[if gte IE 8]> = 高於或者等於IE8版本
下面的程式碼是在非IE瀏覽器下執行的條件註釋

<!--[if !IE]><!-->
您使用不是 Internet Explorer
<!--<![endif]-->
<!--[if IE 6]><!-->
您正在使用Internet Explorer version 6或者 一個非IE 瀏覽器
<!--<![endif]-->


    <!DOCTYPE html>  
    <html>  
    <head>  
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    <title>DIV IF條件例項</title>  
    </head>  
    <body>  
    你正在使用：   
    <!--[if IE 7]>  
    <h2>IE7</h2>  
    <![endif]-->  
    <!--[if IE 6]>  
    <h2>IE6</h2>  
    <![endif]-->  
    <!--[if IE 8]>  
    <h2>IE8</h2>  
    <![endif]-->  
      
    <!--[if IE 9]>  
    <h2>IE9</h2>  
    <![endif]-->  
    <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>

相關文章