CSS瀏覽器安全色性問題及解決方案

一、網頁背景半透明

網頁背景半透明

代碼如下	複製代碼
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起來。