日本免费全黄少妇一区二区三区-高清无码一区二区三区四区-欧美中文字幕日韩在线观看-国产福利诱惑在线网站-国产中文字幕一区在线-亚洲欧美精品日韩一区-久久国产精品国产精品国产-国产精久久久久久一区二区三区-欧美亚洲国产精品久久久久

IE下css常見問題總結(jié)及解決

【IE下css常見問題總結(jié)及解決】1、div的垂直居中問題:
解決方法:將行距增加到和整個(gè)DIV一樣高:

復(fù)制代碼代碼如下:
div{
height: 100px;
line-height: 100px;
text-align: center;orvertical-align: middle(測(cè)試發(fā)現(xiàn)使用vertical-align時(shí),水平方向無法居中,text-align可以)
}
divtest/div

2、margin加倍的問題:
ie6下,div設(shè)置為float時(shí),左(右)margin會(huì)加倍 。
解決方法:在這個(gè)div里面加上display:inline; 例如:

IE下css常見問題總結(jié)及解決


3、ie6下頁(yè)面min-width/height與max-width/height問題:
ie6無法識(shí)別max- 和min-,可以用表達(dá)式解決這一問題,例如:
IE下css常見問題總結(jié)及解決


4、ie6 3px bug:
1)當(dāng)浮動(dòng)元素與非浮動(dòng)元素相鄰時(shí),會(huì)出現(xiàn)3px像素空隙,例如:
IE下css常見問題總結(jié)及解決


解決方法:給非浮動(dòng)的元素添加浮動(dòng)屬性,即可解決這個(gè)問題(.right添加float:left;) 。
2)div包含img時(shí),底部會(huì)出現(xiàn)留白,例如:
IE下css常見問題總結(jié)及解決


解決方法:a、dom結(jié)構(gòu)調(diào)整為:div style=background:#f00;img src=https://www.rkxy.com.cn/dnjc/test alt=pic //div
 b、設(shè)置img元素display: block; (img 默認(rèn)為inline元素)
IE下css常見問題總結(jié)及解決


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)頁(yè),而每個(gè)欄中又有一些鏈接、div等,這個(gè)時(shí)候容易引發(fā)捉迷藏問題 。即有些內(nèi)容無法顯示,而當(dāng)鼠標(biāo)選擇此區(qū)域時(shí),發(fā)現(xiàn)內(nèi)容是確實(shí)存在的,例如:
IE下css常見問題總結(jié)及解決


 
IE下css常見問題總結(jié)及解決


解決方法:
1):在對(duì)頁(yè)面上的對(duì)象使用float浮動(dòng)之后,最后在下面使用帶有clear:both;的div對(duì)頁(yè)面上進(jìn)行一些浮動(dòng)上的清理工作,并且盡量避免對(duì).layout使用background 。去掉.layout的background后可以正常顯示 。
2):給.layout使用固定寬和高,盡管這樣會(huì)對(duì)頁(yè)面有所限制,但能消除一些捉迷藏的影響 。給.layout添加width: 500px; height: 300px;,右側(cè)內(nèi)容可以正常顯示 。
3):給.layout和.left添加position:relative;后頁(yè)面內(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í)慣,盡量使用最少的層次嵌套來滿足頁(yè)面設(shè)計(jì)需要,使頁(yè)面結(jié)構(gòu)簡(jiǎn)單、實(shí)用、易控制與管理,盡可能的減少由于不必要的嵌套引來的連鎖問題 。
6、父div高度自適應(yīng)失效問題:
div嵌套時(shí),當(dāng)子div設(shè)置浮動(dòng)屬性后,其父div的高度自適應(yīng)失效了 。例如:
IE下css常見問題總結(jié)及解決


解決方法:
1)向父div的末尾再插入一個(gè)額外的標(biāo)簽,并令其清除浮動(dòng)(clear)以撐大父容器 。這種方法瀏覽器兼容性好,但需要添加額外的而且通常是無語(yǔ)義的標(biāo)簽 。這種方法是W3C推薦的方法 。
IE下css常見問題總結(jié)及解決


2)使用after偽類(ie6/7不支持after偽類):

推薦閱讀