title: css的ie6兼容問題
date: 2017-06-13 13:45:13
tags: css筆記
png圖片的兼容性
png的圖片在ie6下默認(rèn)不是透明的，所以需要處理一下应民。
使用DD_belatedPNG插件循帐，需要在script中調(diào)用坑资，
DD_belatedPNG.fix("selector1,selector2")渣淤，缺點(diǎn)是不支持body元素。第二種方法是使用ie6的濾鏡屬性饼灿，這個(gè)屬性body也可以使用夷家。
_background-image:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="XX.png",sizingMethod="crop");蒸其，因?yàn)橹恍枰猧e6支持所以用了hack。
float在ie6的兼容問題
有如下結(jié)構(gòu)
<style>
.box {
width: 400px;
border: 1px solid #000000;
overflow: hidden;
}
.left {
float: left;
background-color: red;
}
.right {
float: right;
background-color: blue;
}
h2 {
height: 30px;
}
</style>
<div class="box">
<div class="left">
<h2>左邊</h2>
</div>
<div class="right">
<h2>右邊</h2>
</div>
</div>
將.left和.right分別左右浮動并設(shè)置顏色库快、h2元素設(shè)置高度應(yīng)該是如下效果摸袁。
但在ie6下會顯示成這樣，
ie6下在浮動的元素下的元素h2設(shè)置高度义屏，會獨(dú)占整行靠汁，因?yàn)閔2是塊級元素，但我希望的是浮動元素被內(nèi)容撐開闽铐。這時(shí)只要設(shè)置樣式h2{float:left}就可以解決這個(gè)問題蝶怔。
另外假設(shè)父元素的寬度夠長，如果子元素中第一個(gè)元素浮動并且寬度為200px兄墅，那么第二個(gè)元素即是設(shè)置了margin-left:200px;那么會有也間隙踢星，所以既然要并排顯示那么就都設(shè)置浮動，不要一個(gè)浮一個(gè)不浮隙咸。
ie6瀏覽器子元素超出寬度問題
在標(biāo)準(zhǔn)瀏覽器子元素比父元素寬高大時(shí)沐悦，會超出父元素，但不會改變父元素大小扎瓶，但是在ie6下回直接撐大父元素所踊，會導(dǎo)致整個(gè)布局亂掉泌枪，所以ie6下布局一定要注意子元素的尺寸問題概荷。
塊級元素嵌套規(guī)則
p標(biāo)簽、h標(biāo)簽碌燕、td標(biāo)簽是不能嵌套塊級元素的误证，如果在ie6下嵌套了還會莫名多生成一個(gè)塊級元素占用空間，布局也會亂掉修壕。
margin的兼容性問題
margin-top的傳遞問題
在子元素中設(shè)置margin-top那么父元素也會掉下來愈捅。
- 給父元素設(shè)置邊框。
- 給父元素設(shè)置overflow:hidden慈鸠。(標(biāo)準(zhǔn)瀏覽器蓝谨、ie7及以上瀏覽器)
- 給父元素設(shè)置zoom:1;(ie7及以下瀏覽器)
- 在ie7及以下瀏覽器設(shè)置父盒子的寬和高也可以解決。
上下margin的疊壓問題
同級元素如果有上下margin的設(shè)置，那么上下兩個(gè)元素會導(dǎo)致上面元素的下margin和下面元素的上margin重疊譬巫。
解決方法是不要設(shè)置margin,而是設(shè)置某一個(gè)方向的margin咖楣，比如margin-top、margin-bottom芦昔。
inline-block的兼容性問題
ie7及以下瀏覽器不識別display:inline-block屬性诱贿。所以在ie7及以下瀏覽器要用行內(nèi)塊需要設(shè)置*display:inline;*zoom:1;。*號是只讓ie7咕缎、ie6識別珠十。
ie6的最小高度問題
在ie6瀏覽器下最小高度是19px；如果要設(shè)置小于19px的元素凭豪，那么首先要設(shè)置具體高度焙蹭，然后要加*overflow:hidden屬性。剪裁掉多出的部分墅诡。
ie6雙邊距的問題
當(dāng)元素浮動后壳嚎，再設(shè)置margin-left那么就會產(chǎn)生雙倍邊距。解決辦法是給浮動元素設(shè)置*display:inline末早。
ie6瀏覽器li的間隙
ie6瀏覽器下li元素內(nèi)部的子元素如果浮動烟馅，li之間就會產(chǎn)生4px的間隙。解決方法是給li元素增加*vertical-align:top;屬性然磷。
ie6文字溢出的bug
ie6下兩個(gè)浮動元素中間有注釋或者內(nèi)聯(lián)元素郑趁，并且兩個(gè)浮動元素寬度相加和父級寬度相差在6px以內(nèi)，就會導(dǎo)致浮動元素內(nèi)的文字溢出一個(gè)重復(fù)的姿搜，并且每多一個(gè)內(nèi)聯(lián)元素或者注釋就會多出一個(gè)重復(fù)文字寡润。
- 讓兩個(gè)浮動元素之間沒有內(nèi)聯(lián)元素和注釋。
- 如果只有一個(gè)浮動元素設(shè)置了寬度另一個(gè)沒有寬舅柜，那么比父盒子的寬小3px即可梭纹。
- 如果兩個(gè)浮動元素都設(shè)置了寬，那么兩個(gè)元素加起來要比父盒子的寬小6px致份。
ie6相對定位于overflow:hidden的問題
ie6下當(dāng)子元素比父元素大時(shí)变抽，并且子元素設(shè)置了相對定位，那么父盒子即使使用overflow:hidden也無法剪裁子元素氮块。
只有將父盒子也設(shè)置為相對定位才可以剪裁绍载。
ie6絕對定位奇數(shù)問題
當(dāng)父元素設(shè)置相對或者絕對定位并且寬高為奇數(shù)，那么在ie6中子元素設(shè)置絕對定位即使left/right和top/bottom設(shè)置為0滔蝉，也會有1px的距離击儡。
所以ie6下要使用定位父盒子必須是偶數(shù)。
ie6浮動元素和絕對定位的問題
父元素設(shè)置相對定位蝠引，如果子元素設(shè)置浮動撐滿整個(gè)父元素的空間阳谍，那么此時(shí)再有一個(gè)同級子元素設(shè)置絕對定位則這個(gè)元素會消失蛀柴。
- 造成這個(gè)原因的是同級的問題，那么再絕對定位元素外面套一層元素就可解決矫夯。
- 也可以讓浮動的子元素寬加起來比父元素少6px名扛，那么絕對定位的元素也可以顯示出來。
ie6下input間隙問題
input作為子元素時(shí)茧痒，父盒子不設(shè)高度肮韧，那么input設(shè)置高度后撐開父盒子會造成上下分別1px的間隙，漏出父盒子旺订。
解決方法是設(shè)置input左浮動
