1、div的垂直居中問題： 

解決方法：將行距增加到和整個(gè)DIV一樣高：

2、margin加倍的問題： 

ie6下，div設(shè)置為float時(shí)，左（右）margin會(huì)加倍。

     解決方法：在這個(gè)div里面加上display:inline; 例如：

3、ie6下頁面min-width/height與max-width/height問題： 

ie6無法識(shí)別max- 和min-，可以用表達(dá)式解決這一問題，例如： 

4、ie6 3px bug： 

1）當(dāng)浮動(dòng)元素與非浮動(dòng)元素相鄰時(shí)，會(huì)出現(xiàn)3px像素空隙，例如： 

解決方法：給非浮動(dòng)的元素添加浮動(dòng)屬性，即可解決這個(gè)問題（.right添加float:left;）。 

2）div包含img時(shí)，底部會(huì)出現(xiàn)留白，例如：

解決方法：a、dom結(jié)構(gòu)調(diào)整為：<div style="background:#f00;"><img src="test" alt="pic" /></div>  

　b、設(shè)置img元素display: block; （img 默認(rèn)為inline元素）

5、ie6捉迷藏的問題：（參考http://blog.csdn.net/bluesqsr/article/details/5911038）            

當(dāng)div應(yīng)用稍顯復(fù)雜時(shí)，常常出現(xiàn)的情況是在用于版式布局時(shí)，有時(shí)當(dāng)制作一個(gè)左右兩欄的網(wǎng)頁，而每個(gè)欄中又有一些鏈接、div等，這個(gè)時(shí)候容易引發(fā)捉迷藏問題。即有些內(nèi)容無法顯示，而當(dāng)鼠標(biāo)選擇此區(qū)域時(shí)，發(fā)現(xiàn)內(nèi)容是確實(shí)存在的，例如：

解決方法：

1）：在對(duì)頁面上的對(duì)象使用float浮動(dòng)之后，最后在下面使用帶有clear:both;的div對(duì)頁面上進(jìn)行一些浮動(dòng)上的清理工作，并且盡量避免對(duì).layout使用background。去掉.layout的background后可以正常顯示。

2）：給.layout使用固定寬和高，盡管這樣會(huì)對(duì)頁面有所限制，但能消除一些捉迷藏的影響。給.layout添加width: 500px; height: 300px;，右側(cè)內(nèi)容可以正常顯示。

3）：給.layout和.left添加position:relative;后頁面內(nèi)容可以正常顯示.

4）：對(duì).layout使用line-height屬性，強(qiáng)制瀏覽器對(duì)其中的內(nèi)容進(jìn)行行距調(diào)整，從而可以消除捉迷藏bug。例如添加line-height:1;右側(cè)內(nèi)容就可以正常顯示。

捉迷藏bug雖然是IE留下的后遺癥，但是我們應(yīng)當(dāng)在div的嵌套上遵循一些習(xí)慣，盡量使用最少的層次嵌套來滿足頁面設(shè)計(jì)需要，使頁面結(jié)構(gòu)簡單、實(shí)用、易控制與管理，盡可能的減少由于不必要的嵌套引來的連鎖問題。 

6、父div高度自適應(yīng)失效問題： 

div嵌套時(shí)，當(dāng)子div設(shè)置浮動(dòng)屬性后，其父div的高度自適應(yīng)失效了。例如：

解決方法：

1）向父div的末尾再插入一個(gè)額外的標(biāo)簽，并令其清除浮動(dòng)（clear）以撐大父容器。這種方法瀏覽器兼容性好，但需要添加額外的而且通常是無語義的標(biāo)簽。這種方法是W3C推薦的方法。

      2）使用after偽類（ie6/7不支持after偽類）：

這種方法就是對(duì)父容器使用after偽類和內(nèi)容聲明在指定的現(xiàn)在內(nèi)容末尾添加新的內(nèi)容。經(jīng)常的做法就   是添加一個(gè)“點(diǎn)”，因?yàn)樗容^小不太引人注意。然后我們?cè)倮盟鼇砬宄?dòng)（閉合浮動(dòng)元素），并隱藏這個(gè)內(nèi)容 #outer:after

4）浮動(dòng)父元素，float-in-float：這種做法就是讓父容器也浮動(dòng)，這利用到了浮動(dòng)元素的一個(gè)特性——浮動(dòng)元素會(huì)閉合浮動(dòng)元素。這種方式在IE和標(biāo)準(zhǔn)兼容瀏覽器中都有較好的效果，但在實(shí)際編寫中，父div不是隨意就可浮動(dòng)的，有可能造成更多問題，因此一般不采用此法。 

7、定義1px高度容器問題： 

ie6下無法定義1px高度的容器，例如： 

 解決方法：

1）加overflow: hidden;

2）加zoom: 0.08;

最新評(píng)論