CSS HACK 及常見問題

1、CSS經常使用hack

1.方式一：條件註釋法

這種方式是IE瀏覽器專有的Hack方式，微軟官方推薦使用的hack方式。舉例以下

    只在IE下生效
    <!--[if IE]>
    這段文字只在IE瀏覽器顯示
    <![endif]-->
    
    只在IE6下生效
    <!--[if IE 6]>
    這段文字只在IE6瀏覽器顯示
    <![endif]-->
    
    只在IE6以上版本生效
    <!--[if gte IE 6]>
    這段文字只在IE6以上(包括)版本IE瀏覽器顯示
    <![endif]-->
    
    只在IE8上不生效
    <!--[if ! IE 8]>
    這段文字在非IE8瀏覽器顯示
    <![endif]-->
    
    非IE瀏覽器生效
    <!--[if !IE]>
    這段文字只在非IE瀏覽器顯示
    <![endif]-->

2.方式二：類內屬性前綴法

常見的前綴符號：*(ie 7/6)          +(ie 7)            _(ie 6)    

常見的後綴符號：\0(ie 8/9/10)     \9\0(  ie 9/10)     !important(只有ie6不識別)

<div class="div1"></div>

div{height:500px;}
/*請注意如下代碼順序不能有錯,不然效果會出錯*/
.div1{
    background-color:red\0;     /* ie 8/9/10 */
    background-color:blue\9\0;  /* ie 9/10*/
    *background-color:yellow;   /* ie 7/6*/
    _background-color:gray;     /* ie 6*/
}
/*特意爲IE10寫的樣式效果*/
.ie10 .div1{
    background:#000;
    color:#fff;
}

2、常見兼容技巧

1.在公共樣式中把body，ul，form等標籤樣式reset，能夠避免不少沒必要要的問題。

2. 居中問題.

1).垂直居中.

將line-height 設置爲當前div相同的高度,再經過vertical-align: middle.( 注意內容不要換行.)

2).水平居中.

margin: 0 auto;(固然不是萬能)

你能夠把html的body以內任何項目置於中，該項目將自動得到相等的左右邊界值從而保證了居中顯示。不過，這在IE6

以前版本的瀏覽器中仍然有問題，將不會居中，所以必須

修改以下：

body { 

text-align: center; 

} 

#content { 

text-align: left; 

width: 700px; 

margin: 0 auto; 

}

對body的設定將致使主體內容居中，可是連全部的文字也居中了，這恐怕不是你想要的效果，爲此#content 的div還要指定一個值：text-align: left

3.cursor: pointer 能夠同時在IE FF 中顯示遊標手指狀，hand 僅IE 能夠

4.若是文字過長，則將過長的部分變成省略號顯示：IE5，FF無效，但能夠隱藏，IE6有效<DIV STYLE=「width：120px；height：50px；border：1px solid blue；overflow：hidden；text-overflow：ellipsis」> <NOBR>就是好比有一行文字，很長，表格內一行顯示不下。Phontol.com</NOBR> 固定寬度漢字截斷：overflow：hidden；text-overflow：ellipsis；white-space：nowrap；（不過只能處理文字在一行上的截斷，不能處理多行。）（IE5以上）FF不能，它只隱藏。

5.IE不認得min-這個定義，但實際上它把正常的width和height看成有min的狀況來使。這樣問題就大了，若是隻用寬度和高度，正常的瀏覽器裏這兩個值就不會變，若是隻用min-width和min-height的話，IE下面根本等於沒有設置寬度和高度。 
好比要設置背景圖片，這個寬度是比較重要的。要解決這個問題，能夠這樣： 

#box{ 

width: 80px; 
height: 35px;
}

html>body #box{

 width: auto;

 height: auto;

 min-width: 80px; 

 min-height: 35px;

}

6.浮動ie產生的雙倍距離

#box{ float:left; width:100px; margin:0 0 0 100px; //這種狀況之下IE會產生200px的距離 display:inline; //使浮動忽略} 這裏細說一下block與inline兩個元素：block元素的特色是,老是在新行上開始,高度,寬度,行高,邊距均可以控制(塊元素);Inline元素的特色是,和其餘元素在同一行上,不可控制(內嵌元素); #box{ display:block; //能夠爲內嵌元素模擬爲塊元素 display:inline; //實現同一行排列的效果 diplay:table;

7.爲何FF下文本沒法撐開容器的高度

標準瀏覽器中固定高度值的容器是不會象IE6裏那樣被撐開的,那我又想固定高度,又想能被撐開須要怎樣設置呢？辦法就是去掉height設置min- height:200px; 這裏爲了照顧不認識min-height的IE6 能夠這樣定義:

{ 

height:auto!important;

height:200px; 

min-height:200px; 

}

8.清除浮動

.hackbox{ display:table; //將對象做爲塊元素級的表格顯示}或者.hackbox{ clear:both;} 或者加入:after（僞對象）,設置在對象後發生的內容，一般和content配合使用，IE不支持此僞對象，非Ie 瀏覽器支持， 所 以並不影響到IE/WIN瀏覽器。這種的最麻煩的......

#box:after{ 
 content: ".";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
}

9.DIV浮動  IE文本產生3象素的bug

左邊對象浮動，右邊採用外補丁的左邊距來定位，右邊對象內的文本會離左邊有3px的間距.

#box{ 

float:left; 

width:800px;}#left{ 

float:left; 

width:50%;}#right{ 

width:50%;}*html 

#left{ margin-right:-3px; //這句是關鍵

}

HTML代碼

<div id="box"> <div id="left"></div> <div id="right"></div></div>

10.屬性選擇器(這個不能算是兼容,是隱藏css的一個bug)   
   p[id]{}div[id]{} 
   這個對於IE6.0和IE6.0如下的版本都隱藏,FF和OPera做用 
    屬性選擇器和子選擇器仍是有區別的,子選擇器的範圍從形式來講縮小了,屬性選擇器的範圍比較大,如p[id]中,全部p標籤中有id的都是一樣式的.

11.IE捉迷藏的問題

當div應用複雜的時候每一個欄中又有一些連接，DIV等這個時候容易發生捉迷藏的問題。

有些內容顯示不出來，當鼠標選擇這個區域是發現內容確實在頁面。

解決辦法：對#layout使用line-height屬性或者給#layout使用固定高和寬。頁面結構儘可能簡單。

12.高度不適應

高度不適應是當內層對象的高度發生變化時外層高度不能自動進行調節，特別是當內層對象使用margin 或paddign 時。

例：<div id="box"> <p>p對象中的內容</p> </div>

CSS：

#box {background-color:#eee; }

#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }

解決方法：在P對象上下各加2個空的div對象CSS代碼：.1{height:0px;overflow:hidden;}或者爲DIV加上border屬性。

12.FF 支持!important, IE 則忽略, 可用!important 爲FF 特別設置樣式