關於IE6的一些常見的CSS BUG處理
CSS BUG:樣式在各瀏覽器中解析不一致的情況,或者說CSS樣式在瀏覽器中不能正確顯示的問題稱為CSS BUG;
CSS Hack:css hack是指一種相容css 在不同瀏覽器中正確顯示的技巧方法,因他們都屬於個人對css程式碼的非官方的修改,或非官方的補丁。
使用Hack的一些副作用:降低了css程式碼的可讀性,增加了程式碼的負擔
今天跟大家分享下關於IE6一些常見的BUG處理:
(1)圖片間隙:
adiva)div中的圖片間隙(該BUG出現在IE6及更低版本中)
描述:在div中插入圖片時,圖片會將div下方撐大三像素;
hack1:將大三像素;
hack2:將轉為塊狀元素,給添加聲明:display:block;
b)dt,li中圖片間隙(IE6)
b)dt,li中圖片間隙(IE6)
〜〜〜(IE6);
(2)預設高度(IE6) 描述:在IE6及以下版本中,部分塊元素擁有預設高度(低於18px-22px高度) hack1:給元素添加聲明:font-size:0;hack2:給元素添加聲明:overflow:hidden;
(3)雙倍浮向(雙倍邊距)
描述:當IE6及更低版本瀏覽器在解析浮動元素時,會錯誤地把浮把浮向邊邊界加倍顯示。
hack:為浮動元素添加聲明:display:inline;
(4)百分比BUG
描述:在IE6及以下版本中在解析百分比時,會以四捨五入方式計算從而導致50%加50%大於100 %的情況;
hack:在右面的浮動元素中加入聲明clear:right;(清除右浮動)
(5)滑鼠指標
描述:Cursor屬性的hand屬性值只有IE8以下瀏覽器識別器不識別該聲明。 Cursor屬性的pointer屬性值IE6以上版本及其他核心瀏覽器都識別該聲明。
hack:如統一某元素滑鼠指標為手型,應加上聲明:Cursor:pointer;
(6)表單行高不一致
描述:表單元素行高不一致; :float:left;
(7)按鈕元素預設大小不一致
描述:各瀏覽器中按鈕元素大小不一致。
hack1:統一大小/(用a標記模擬);
hack2:input外套一個標籤,在這個標籤裡寫按鈕的樣式,把input的邊框和背景色去掉;
直接把圖片當作按鈕背景;
(8)瀏覽器解析按鈕邊框時,會把邊框解析在按鈕內部,不會影響按鈕的大小。
(9)瀏覽器解析margin屬性值時,上下邊界的屬性值重合,左右相加;