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

  1. 首頁(yè) > 云知道 > >

IE6,IE7,IE8 css bug搜集及瀏覽器兼容性問題解決方法匯總

云知道

斷斷續(xù)續(xù)的在開發(fā)過程中收集了好多的bug以及其解決的辦法，都在這個(gè)文章里面記錄下來(lái)了！希望以后解決類似問題的時(shí)候能夠快速解決，也希望大家能在留言里面跟進(jìn)自己發(fā)現(xiàn)的ie6 7 8bug和解決辦法！
1：li邊距無(wú)故增加
任何事情都是有原因的，li邊距也不例外 。
先描述一下具體狀況：有些時(shí)候li邊距會(huì)突然增 加很多，值也不固定（只在IE6/IE7有這種現(xiàn)象），讓人摸不著頭腦，仔細(xì)研究發(fā)現(xiàn)是由于其低級(jí)元素ul的padding引 起，padding的上下值對(duì)li有影響，左右無(wú)影 響 。所以只好笨手笨腳地把padding去掉，換成margin 。這是能解決問題，但往往不是我們想要的結(jié)果，或許 還會(huì)引起其他不必要的怪現(xiàn)象 。
解決這個(gè)問題的方法，其實(shí)很簡(jiǎn)單，既然是有ul引 起的，就設(shè)置ul的顯示形式為*display:inline-block;即可，前面加*是只 針對(duì)IE6/IE7有效，其他瀏覽器并不渲染這個(gè)屬性 。
2：分頁(yè)數(shù)字 字體用Arial 加粗不抖動(dòng)

復(fù)制代碼代碼如下:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
html xmlns="http://www.w3.org/1999/xhtml"
head
meta http-equiv="Content-Type"content="text/html; charset=gb2312"/
title無(wú)標(biāo)題文檔/title
link /
style type="text/css"
body, ul, h1 {
font-family:Arial;
font-size:12px;
}
.page {
text-align:center;
}
.page a {
display:inline-block;
padding:5px 8px;
text-decoration:none;
border:1px solid #09F;
background-color:#0CF;
color:#FFF;
}
.page a:hover, .page .selected {
border:1px solid #CCC;
background-color:#FFF;
color:#000;
font-weight:bold;
}
/style
/head
body
h1分頁(yè)樣式/h1
div class="page" a 1/a a 2/a a 3/a a 4/a a 5/a
a 6/a a 7/a a 8/a a 9/a a 10/a /div
/body
/html

3：IE6 CSS選擇器區(qū)分IE6
IE6不支持子選擇器；先針對(duì)IE6使用常規(guī)申明CSS選擇器，然后再用子選擇器針對(duì)IE7 及其他瀏覽器 。

復(fù)制代碼代碼如下:
/*IE6 專用 */
.content {color:red;}
/* 其他瀏覽器 */
divp .content {color:blue;}

4：IE6最小高度
IE6 不支持min-height屬性，但它卻認(rèn)為height就是最小高度 。解決方法：
使用ie6不支持但其余瀏覽器支持的屬性!important 。

復(fù)制代碼代碼如下:
#container{min-height:200px; height:auto !important; height:200px;}

5：IE6100% 高度
在IE6下，如果要給元素定義100%高度，必須要明確定義它的父級(jí)元素的高度，如果你需要給元素定義滿屏的高度，就得先給html和body定義height:100%; 。
6：IE6躲貓貓bug
在IE6和IE7下，躲貓貓bug是一個(gè)非常惱人的問題 。一個(gè)撐破了容器的浮動(dòng)元素，如果在他之后有不浮動(dòng)的內(nèi)容，并且有一些定義了:hover的鏈接，當(dāng)鼠標(biāo)移到那些鏈接上時(shí)，在IE6下就會(huì)觸發(fā)躲貓貓 。
解決方法很簡(jiǎn)單：
1.在（那個(gè)未浮動(dòng)的）內(nèi)容之后添加一個(gè)span style=clear: both; /span
2.觸發(fā)包含了這些鏈接的容器的hasLayout，一個(gè)簡(jiǎn)單的方法就是給其定義height:1%;
7:IE6絕對(duì)定位元素的1像素間距bug
IE6下的這個(gè)錯(cuò)誤是由于進(jìn)位處理誤差造成（IE7已修復(fù)），當(dāng)絕對(duì)定位元素的父元素高或?qū)挒槠鏀?shù)時(shí)，bottom和right會(huì)產(chǎn)生錯(cuò)誤 。唯一的解決辦法就是給父元素定義明確的高寬值，但對(duì)于液態(tài)布局沒有完美的解決方法 。

推薦閱讀