前端常見兼容性問題筆記


計算一定要精確

ie6子元素會撐開父級設置好的寬高

會出現兼容性問題 所以要計算好padding值

不要讓內容的寬高超出父級設置的寬高

 

在ie6、7下元素浮動,

如果寬度需要內容撐開,就給里面的塊元素都加浮動。

ie67下元素要通過浮動並列在一行就要都給元素加浮動  不然會出現兼容性問題

標簽嵌套規范   內聯不能嵌套塊狀

ie6最小高度問題 overflow解決

1px dotted 在ie6下不支持  解決  切背景平鋪

margin 傳遞   浮動或者有寬高 或者

 

在ie6下解決margin傳遞要觸發haslayout

在ie6下父級有邊框的時候子元素margin值消失 

解決 觸發haslayout 盡量觸發

ie6只支持 a標簽的四個偽類[偽元素]

inline-block  ie6不支持塊標簽

 

浮動:

1.雙倍邊距bug        塊 浮動 橫向margin         display:inline 

2.li本身沒浮動內容浮動 ie6 li 內容浮動            給li加浮動     li加vertical-alian

其實就是浮動塊狀元素前面不能有內聯文本的出現

 

 

ie6 下,下margin消失

當一行子元素占有的寬度之和和父級的寬度相差超過3px,或者有不滿行狀態的時候最有一行的子元素的下margin值就會失效、

 

ie6下文字溢出bug

原因 1.浮動元素前面有注釋 或者內聯元素

內聯元素越多,溢出越多

子元素的寬度和父級的寬度相差小於3px的時候

解決辦法用div包起來 或者把父級元素寬度調大

 

當浮動元素和絕對定位是並列關系的時候 絕對定位元素  會消失掉

解決辦法給絕對定位元素套一層  包一個div 取消並列關系

 

相對定位:

在ie六下  元素有相對定位的話 父級的overflow 就包不住子級

解決辦法 :給父級也加相對定位

絕對定位

在ie6下定位 元素的父級寬高是奇數的時候元素right 和bottom值會有1px的偏差 沒辦法解決盡量避免

固定定位 ie6不兼容。

 

表單元素

ie7 6下輸入類型表單控件

上下有1px的間隙問題

解決:給input加浮動

boder:none失效

解決:input重新設置下背景 白色也設置下

輸入文字把背景圖擠出去

解決:把背景加給父級  清除自身背景 background:none;

-------------------------------------------------------------------

png問題 js文件解決

 

條件注釋語句:

css  hack

important

 

margin負值  在ie6下超出父級 就被截掉

然后相對定位就可以解決

聖杯  據對定位

、等高布局


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM