html 兼容性問題及一些處理方法（1）

兼容性問題：

計(jì)算一定要精確 要要讓內(nèi)容的寬度超出我們設(shè)置的寬高，在IE6下，內(nèi)容會撐開設(shè)置好的寬高；；

在IE6元素浮動(dòng)，如果寬度需要內(nèi)容撐開，就給里面的塊元素都加浮動(dòng)；

在IE6，7下元素要通過浮動(dòng)并在一行，就給這行元素都加上浮動(dòng)；

注意標(biāo)簽嵌套規(guī)范；

IE6下最小高度問題，在IE6下元素的高度小于19px時(shí)，游覽器會將其當(dāng)做19px來處理，接解決辦法：overflow：hidden；

1 px dotted在IE下不支持；至少大于等于2px；解決辦法 截圖片 平鋪；

在IE6下解決margin傳遞要觸發(fā)haslayout，在IE6下父級有邊框的情況下，子元素的margin值消失了，解決辦法還是去觸發(fā)haslayout，盡量觸發(fā)haslayout寫上zoom：1；

IE6下雙邊距問題margin值，在IE6下，塊元素有浮動(dòng)或橫向的margin值會被放大成兩倍，解決辦法：display:inline;

margin-right 一行右側(cè)第一個(gè)元素有雙邊距，margin-left 一行左側(cè)第一個(gè)元素有雙邊距；

在IE6,7下，li本身沒浮動(dòng)，但li的內(nèi)容有浮動(dòng)，li下邊就會產(chǎn)生一個(gè)間隙，解決辦法：1.給li加浮動(dòng) 2.給li加垂直的對其方式vertical-algin:top;

在IE6下最小高度問題，和li的間隙問題共存的時(shí)候，給li加浮動(dòng)；

當(dāng)一行子元素占有的寬度之和和父級的寬度相差3px，或者不滿行狀態(tài)的時(shí)候，最后一行子元素的下margin在IE6下就會失效

IE6下的文字溢出BUG，子元素的寬度和父級的寬度相差小于3px的時(shí)候，兩個(gè)浮動(dòng)元素中間有注釋或者內(nèi)嵌元素，解決版本：用div將注釋和內(nèi)嵌元素包起來

當(dāng)浮動(dòng)元素和絕對定位元素是并列關(guān)系的時(shí)候，在IE6下絕對元素會消失，解決辦法：給定位元素外面包個(gè)div

在IE6，7下，子元素有相對定位的話，父級的overflow就包不住子元素了，解決辦法：給父級也加相對定位；

在IE6下絕對定位元素的父級寬度時(shí)奇數(shù)的時(shí)候，元素的right值和bottom值會有1px的偏差。

不要給Tbody和Thead 加樣式，IE6下不兼容；

在IE6，7下輸入類型的表單控件上下各有1px的間隙；解決辦：給input加浮動(dòng)；

在IE6，7下輸入類型的表單控件加border：none；無效果；解決辦法給input重新加背景

在IE6，7下輸入類型的表單控件輸入文字的時(shí)候背景圖片會跟著一塊移動(dòng)；解決辦法：加給父級，清除自己的background：none，父級寬度和自己寬度相同;

IE6下png圖片拼接問題，會將透明圖片變成不透明，使用JS來進(jìn)行處理；

在IE6下沒在important 后加同一樣的樣式，會破壞掉important的作用，按照默認(rèn)的優(yōu)先級順序來走；

在IE6下用margin的負(fù)值 超出父級的部分都會被屏蔽掉,可以采用定位元素來處理

    a標(biāo)簽的偽類才全兼容

    元素的寬度由內(nèi)容撐開

display:inline;

display：inline-block；

float

position:absolute

position:fixed 不兼容

border-radius:10px 圓角

百萬級別訪問量的問題：

css精靈 減少網(wǎng)站圖片的返回請求次數(shù)