一、網(wǎng)頁(yè)背景半透明
網(wǎng)頁(yè)背景半透明
復(fù)制代碼 代碼如下:
opacity:0.8;
filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=80)";IE6中CSS方法解決PNG圖片半透明問(wèn)題：
#DIVname {
width: 300px;
height: 99px;
background: url('images/top.png') no-repeat top;
*background: none;
*filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true', sizingMethod='corp', src='template/flower/images/top.png');
}
二、清除浮動(dòng)
復(fù)制代碼 代碼如下:
.clearfix:after{content:"."; display:block; height:0; clear:both; visibility:hidden}
.clearfix{display:inline-block}
.clear{height:0; line-height:0; font-size:0; overflow:hidden; clear:both; display:block;}
*html .clearfix{height:1%;}
.clearfix{display:block;}
三、浮動(dòng)IE6雙邊距
1、為浮動(dòng)元素使用display:inline;
2、IE6下3px間距bug：在IE6中，當(dāng)文本（或無(wú)浮動(dòng)元素）跟在一個(gè)浮動(dòng)的元素之后，文本和這個(gè)浮動(dòng)元素之間會(huì)多出3px的間隔，給浮動(dòng)層添加display:inline或設(shè)計(jì)-3px的間距來(lái)解決這個(gè)bug。
3像素間距bug
div+css中最小高度min-height
方法一：
復(fù)制代碼 代碼如下:
#DIVname {
min-height:150px;
*height:auto!important;
_height:150px;
overflow:visible;
}
方法二：
復(fù)制代碼 代碼如下:
#DIVname {
min-height:1000px;
_height:expression((document.documentElement.clientHeight||document.body.clientHeight)>1000?"1000px":"");
}
五、IE下z-index 的 bug
一般來(lái)講，ie對(duì)父級(jí)的要求比較高，如果父級(jí)有position屬性，但是沒(méi)有給z-index屬性，那默認(rèn)都是0，所以不論子集里面有多高的z-index屬性，都是沒(méi)用的。
所以一般情況下，需要給包含z-index屬性的父級(jí)一個(gè)z-index:1的屬性，這樣可以解決很多莫名其妙的問(wèn)題。
六、IE6調(diào)整窗口大小的bug
當(dāng)把body居中放置，改變IE瀏覽器大小的時(shí)候，任何在body里面的相對(duì)定位元素就會(huì)固定不動(dòng)了，解決方法是給body定義position:relative;就行了。
七、文字大小和行高不兼容
同樣大小的相同字體，各瀏覽器下行高和大小不一樣，需要設(shè)定line-height。
八、mirror margin bug
在IE6下，當(dāng)外層元素內(nèi)有float元素時(shí)，外層元素如定義margin-top:5px，將自動(dòng) 生成margin-bottom:5px，padding也會(huì)出現(xiàn)類似問(wèn)題，解決方案：外層元素設(shè)定border或float。
九、img下的留白
在html里面有：
div>
img src=”" mce_src=”" />
/div>img …/>時(shí)，會(huì)發(fā)現(xiàn)圖片底部不是緊貼著容器底部的，是img后面的空白字符造成，要消除必須這樣寫(xiě)：
div>
img src=”" mce_src=”" />/div>后面兩個(gè)標(biāo)簽要緊挨著。IE7下這個(gè)bug依然存在，解決方案：display:block。
十、圖片和文字同行
大家知道img 的align 有 text-top，middle，absmiddle啊什么的，你可以嘗試去調(diào)整img 和文字讓他們?cè)趇e和ff下能一致，你會(huì)發(fā)現(xiàn)怎么調(diào)都不會(huì)讓你滿意。索性讓img 和文字都 float起來(lái)，用margin 調(diào)整。
失去line-height。div style=”line-height:20px”>img />文字/div>，很遺憾，在ie6下單行文字 line-height 效果消失了。。。，原因是img />這個(gè)inline-block元素和inline元素寫(xiě)在一起了。解決方案：讓img 和文字都 float起來(lái)。
您可能感興趣的文章:- 多瀏覽器兼容的動(dòng)態(tài)加載 JavaScript 與 CSS
- js+css實(shí)現(xiàn)的簡(jiǎn)單易用兼容好的分頁(yè)
- div+css+js實(shí)現(xiàn)無(wú)縫滾動(dòng)類似marquee無(wú)縫滾動(dòng)兼容firefox
- div+CSS 兼容小摘
- CSS Hack 匯總速查手冊(cè)瀏覽器兼容必會(huì)
- css瀏覽器不兼容原因分析及解決辦法
- 使css兼容IE8的小技巧
- JavaScript獲取鼠標(biāo)移動(dòng)時(shí)的坐標(biāo)(兼容IE8、chome谷歌、Firefox)
- javascript中實(shí)現(xiàn)兼容JAVA的hashCode算法代碼分享
- 兼容最新firefox、chrome和IE的javascript圖片預(yù)覽實(shí)現(xiàn)代碼
- JavaScript在IE和FF下的兼容性問(wèn)題
- css與javascript跨瀏覽器兼容性總結(jié)
