一、網頁背景半透明
網頁背景半透明
復制代碼 代碼如下:
opacity:0.8;
filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=80)";IE6中CSS方法解決PNG圖片半透明問題：
#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');
}
二、清除浮動
復制代碼 代碼如下:
.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;}
三、浮動IE6雙邊距
1、為浮動元素使用display:inline;
2、IE6下3px間距bug：在IE6中，當文本（或無浮動元素）跟在一個浮動的元素之后，文本和這個浮動元素之間會多出3px的間隔，給浮動層添加display:inline或設計-3px的間距來解決這個bug。
3像素間距bug
div+css中最小高度min-height
方法一：
復制代碼 代碼如下:
#DIVname {
min-height:150px;
*height:auto!important;
_height:150px;
overflow:visible;
}
方法二：
復制代碼 代碼如下:
#DIVname {
min-height:1000px;
_height:expression((document.documentElement.clientHeight||document.body.clientHeight)>1000?"1000px":"");
}
五、IE下z-index 的 bug
一般來講，ie對父級的要求比較高，如果父級有position屬性，但是沒有給z-index屬性，那默認都是0，所以不論子集里面有多高的z-index屬性，都是沒用的。
所以一般情況下，需要給包含z-index屬性的父級一個z-index:1的屬性，這樣可以解決很多莫名其妙的問題。
六、IE6調整窗口大小的bug
當把body居中放置，改變IE瀏覽器大小的時候，任何在body里面的相對定位元素就會固定不動了，解決方法是給body定義position:relative;就行了。
七、文字大小和行高不兼容
同樣大小的相同字體，各瀏覽器下行高和大小不一樣，需要設定line-height。
八、mirror margin bug
在IE6下，當外層元素內有float元素時，外層元素如定義margin-top:5px，將自動 生成margin-bottom:5px，padding也會出現類似問題，解決方案：外層元素設定border或float。
九、img下的留白
在html里面有：
<div>
<img src=”" mce_src=”" />
</div><img …/>時，會發現圖片底部不是緊貼著容器底部的，是img后面的空白字符造成，要消除必須這樣寫：
<div>
<img src=”" mce_src=”" /></div>后面兩個標簽要緊挨著。IE7下這個bug依然存在，解決方案：display:block。
十、圖片和文字同行
大家知道img 的align 有 text-top，middle，absmiddle啊什么的，你可以嘗試去調整img 和文字讓他們在ie和ff下能一致，你會發現怎么調都不會讓你滿意。索性讓img 和文字都 float起來，用margin 調整。
失去line-height。<div style=”line-height:20px”><img />文字</div>，很遺憾，在ie6下單行文字 line-height 效果消失了。。。，原因是<img />這個inline-block元素和inline元素寫在一起了。解決方案：讓img 和文字都 float起來。
