-
ie6怪異解析之padding和border算入寬高
原因 : 未加入文檔聲明造成非盒模型解析
解決方法 : 加入文檔聲明 <!doctype html> -
IE6在塊元素 , 左右浮動 , 設定margin時造成margin雙倍(雙邊距)
解決方法 display: inline
-
以下三種其實是同一種bug , 其實也不算bug , 舉個例子 : 父標籤高度20 , 子標籤11 , 垂直居中 , 20-11 = 9 , 9要平分給文字上面下面, 怎麼分 ? IE6就會與其他的不同 , 所以 , 儘量避免 ;
-
文字大小爲技術值邊框高度少1px
解決方法 : 字體大小設置爲偶數或者line-height爲偶數
-
line-height , 文本垂直居中差1px
解決方法 : padding-top 代替 line-height 居中 , 或者line-height 加1或者減1
-
與父標籤的寬度的奇偶不同的居中造成1px的偏離
解決方法 : 如果父標籤是奇數寬度 , 則子標籤也用技術寬度 ; 如果父標籤偶數寬度 , 則子標籤也用偶數寬度
-
內部盒模型超出父級時 , 父級被撐大
解決方法 : 父級標籤使用overflow: hidden
-
line-height 默認行高bug
解決方法 : line-height設置
-
行標籤直接會有一小段空白
解決方法 : float或結構並排( 可讀性差 , 不建議 )
-
標籤高度無法小於19px
解決方法 : overflow : hidden;
-
左浮動元素margin-buttom 失效
解決方法 : 顯示設置高度 or 父標籤設置 padding-buttom 代替子標籤的margin-bottom or 再放個標籤讓父標籤浮動 , 子標籤 margin-bottom , 即 ( margin-bottom與float不同時作用於一個標籤 )
-
img於塊元素中 , 底邊多出空白
解決方法 : 父級設置overflow : hidden; 或者img { display: block } 或者 margin: -5px
-
li之間會有間距
解決方法 : float: left;
-
塊元素中有文字及右浮動的行元素 , 行元素換行
解決方法 : 將行元素置於塊元素的文字前
-
position下的left , bottom錯位
解決方法 : 爲父級( relative層 ) 設置寬高 添加 zoom : 1;
-
子級中有設置position , 則父級overflow 失效
解決方法 : 爲父級設置position: relative