#example {
width: 100px !important; /* IE7+FF */
width: 200px; /* IE6 */
}
二、CSS HACK的方法(新手可以看看，高手就當路過吧)
首先需要知道的是：
轉載請註明 http://netsos.cnblogs.com/
所有瀏覽器 通用 height: 100px;
IE6 專用 _height: 100px;
IE7 專用 *+height: 100px;
IE6、IE7 共用 *height: 100px;
IE7、FF 共用 height: 100px !important;
例如：
#example { height:100px; } /* FF */
* html #example { height:200px; } /* IE6 */
*+html #example { height:300px; } /* IE7 */
下面的這種方法比較簡單
轉載請註明 http://netsos.cnblogs.com/
舉幾個例子：
1、IE6 - IE7+FF
#example {
height:100px; /* FF+IE7 */
_height:200px; /* IE6 */
}
其實這個用上面說的第一種方法也可以
#example {
height:100px !important; /* FF+IE7 */
height:200px; /* IE6 */
}
2、IE6+IE7 - FF
#example {
height:100px; /* FF */
*height:200px; /* IE6+IE7 */
}
3、IE6+FF - IE7
#example {
height:100px; /* IE6+FF */
*+height:200px; /* IE7 */
}
4、IE6 IE7 FF 各不相同
#example {
height:100px; /* FF */
_height:200px; /* IE6 */
*+height:300px; /* IE7 */
}
或： 這是 順序--------------------->在這裡再加一個 蘋果的,,[整死人了]---針對safari 的這裡寫不出來,我放到最下面,,部落格園 老是把我這句話過濾掉,,,,,,,
#example {
height:100px; /* FF */
*height:300px; /* IE7 */
_height:200px; /* IE6 */
}
需要注意的是，代碼的順序一定不能顛倒了，要不又前功盡棄了。因為瀏覽器在解釋程式的時候，如果重名的話，會用後面的覆蓋前面的，就象給變數賦值一個道理，所以我們把通用的放前面，越專用的越放後面
轉載請註明 http://netsos.cnblogs.com/
解釋一下4的代碼：
讀代碼的時候，第一行height:100px; 大家都通用，IE6 IE7 FF 都顯示100px
到了第二行*height:300px; FF不認識這個屬性，IE6 IE7都認，所以FF還顯示100px，而IE6 IE7把第一行得到的height屬性給覆蓋了，都顯示300px
到了第三行_height:200px;只有IE6認識，所以IE6就又覆蓋了在第二行得到的height,最終顯示200px
這樣，三個瀏覽器都有自己的height屬性了，各玩各的去吧
這樣說要是你還不明白，要麼你去撞牆，要麼我去!不過還是你去比較好。
哦，差點忘了說了：
*+html 對IE7的相容 必須保證HTML頂部有如下聲明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
轉載請註明 http://netsos.cnblogs.com/
三、使用IE專用的條件注釋
<!--其他瀏覽器 -->
<link rel="stylesheet" type="text/css" href="css.css" />
<!--[if IE 7]>
<!-- 適合於IE7 -->
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
<!--[if lte IE 6]>
<!-- 適合於IE6及以下 -->
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
貌似要編三套css，我還沒用過，先粘過來再說
IE的if條件Hack
1. <!--[if !IE]><!--> 除IE外都可識別 <!--<![endif]-->
2. <!--[if IE]> 所有的IE可識別 <![endif]-->
3. <!--[if IE 5.0]> 只有IE5.0可以識別 <![endif]-->
4. <!--[if IE 5]> 僅IE5.0與IE5.5可以識別 <![endif]-->
5. <!--[if gt IE 5.0]> IE5.0以及IE5.0以上版本都可以識別 <![endif]-->
6. <!--[if IE 6]> 僅IE6可識別 <![endif]-->
7. <!--[if lt IE 6]> IE6以及IE6以下版本可識別 <![endif]-->
8. <!--[if gte IE 6]> IE6以及IE6以上版本可識別 <![endif]-->
9. <!--[if IE 7]> 僅IE7可識別 <![endif]-->
10. <!--[if lt IE 7]> IE7以及IE7以下版本可識別 <![endif]-->
11. <!--[if gte IE 7]> IE7以及IE7以上版本可識別 <![endif]-->注:gt = Great Then 大於
> = > 大於符號
lt = Less Then 小於
< = < 小於符號
gte = Great Then or Equal 大於或等於
lte = Less Then or Equal 小於或等於
四、css filter的辦法(據作者稱是從國外某經典網站翻譯過來的說)
轉載請註明 http://netsos.cnblogs.com/
建立一個css樣式如下：
#item {
width: 200px;
height: 200px;
background: red;
}
建立一個div,並使用前面定義的css的樣式：
<div >some text here</div>
在body表現這裡加入lang屬性,中文為zh：
<body lang="en">
現在對div元素再定義一個樣式：
*:lang(en) #item{
background:green !important;
}
這樣做是為了用!important覆蓋原來的css樣式,由於:lang選取器ie7.0並不支援,所以對這句話不會有任何作用,於是也達到了ie6.0下同樣的效果,但是很不幸地的是,safari同樣不支援此屬性,所以需要加入以下css樣式：
#item:empty {
background: green !important
}
轉載請註明 http://netsos.cnblogs.com/
:empty選取器為css3的規範,儘管safari並不支援此規範,但是還是會選擇此元素,不管是否此元素存在,現在綠色會現在在除ie各版本以外的瀏覽器上。
五、FLOAT閉合（clearing float）
網頁在某些瀏覽器上顯示錯位很多時候都是因為使用了float浮動而沒有真正閉合，這也是div無法自適應高度的一個原因。如果父div沒有設float而其子div卻設了float的話,父div無法包住整個子DIV，這種情況一般出現在一個父DIV下包含多個子DIV。解決辦法：
１、給父DIV也設上float(不要罵我，我知道是廢話)
2、在所有子DIV後新加一個空DIV(不推薦，有些瀏覽器可以看見空DIV產生的空隙)
轉載請註明 http://netsos.cnblogs.com/
比如：
.parent{width:100px;}
.son1{float:left;width:20px;}
.son2{float:left;width:80px;}
.clear{clear:both;margin:0;parding0;height:0px;font-size:0px;}
<div class="parent">
<div class="son1"></div>
<div class="son2"></div>
<div class="clear"></div>
</div>
md,又給我過濾了...看....
@media screen and ("Apple-tab-span" style="font-family: 'Courier New'; white-space: pre; "> p { color:#633; }}
真正的再怎麼也加不進去!!!!!!,我評論下看看,能出來不?
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
