關于CSS對各個浏覽器相容已經是老生常談的問題了, 網絡上的教程遍地都是.以下内容沒有太多新穎, 純屬個人總結, 希望能對初學者有一定的幫助.
一、CSS HACK
以下兩種方法幾乎能解決現今所有HACK.
1, !important
随着IE7對!important的支援, !important 方法現在隻針對IE6的HACK.(注意寫法.記得該聲明位置需要提前.)
<style>
#wrapper
{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>
2, IE6/IE77對FireFox
*+html 與 *html 是IE特有的标簽, firefox 暫不支援.而*+html 又為 IE7特有标簽.
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意順序 */
注意:
*+html 對IE7的HACK 必須保證HTML頂部有如下聲明：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
二、萬能 float 閉合(非常重要!)
關于 clear float 的原理可參見 [How To Clear Floats Without Structural Markup]
将以下代碼加入Global CSS 中,給需要閉合的div加上 class="clearfix" 即可,屢試不爽.
/* Clear Fix */
.clearfix:after
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
.clearfix
display:inline-block;
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
三、其他相容技巧(再次啰嗦)
1, FF下給 div 設定 padding 後會導緻 width 和 height 增加, 但IE不會.(可用!important解決)
2, 居中問題.
1).垂直居中.将 line-height 設定為 目前 div 相同的高度, 再通過 vertical-align: middle.( 注意内容不要換行.)
2).水準居中. margin: 0 auto;(當然不是萬能)
3, 若需給 a 标簽内内容加上 樣式, 需要設定 display: block;(常見于導航标簽)
4, FF 和 IE 對 BOX 了解的差異導緻相差 2px 的還有設為 float的div在ie下 margin加倍等問題.
5, ul 标簽在 FF 下面預設有 list-style 和 padding . 最好事先聲明, 以避免不必要的麻煩. (常見于導航标簽和内容清單)
6, 作為外部 wrapper 的 div 不要定死高度, 最好還加上 overflow: hidden.以達到高度自适應.
7, 關于手形光标. cursor: pointer. 而hand 隻适用于 IE.
本文轉自深藍居部落格園部落格，原文連結：http://www.cnblogs.com/studyzy/archive/2008/04/12/1149834.html，如需轉載請自行聯系原作者
![一位經驗豐富的前端開發人員因未能通過算法面試題而受人嘲笑[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)