兼容IE6、IE7和FF瀏覽器的方法匯集

2024-08-30 08:33:04

字體：大中小

來源：轉載

供稿：網友

這些方法都是我平時用到時在網上找到收藏下來的呵呵，我提前聲明一下免得誤會!
一、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特有標簽.

<style>

#wrapper

{

#wrapper { width: 120px; } /* FireFox */

*html #wrapper { width: 80px;} /* ie6 fixed */

*+html #wrapper { width: 60px;} /* ie7 fixed, 注意順序 */

}

</style>

注意:

*+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" 即可,屢試不爽.

<style>

/* 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 */

</style>

三、其他兼容技巧

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.