Css瀏覽器相容的解決方法_CSS/HTML

一、網頁背景半透明
網頁背景半透明

複製程式碼 程式碼如下:

opacity:0.8;
filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=80)";IE6中CSS方法解決PNG圖片半透明問題：
#DIVname {
      width: 300px;
      height: 99px;
      background. ter :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;
 ); BR>}

方法二：

複製程式碼 程式碼如下:

#DIVname {
      min-height:1000px;
      _height:expression((document.documentElement.clientHeight||document.body.m.Height)phpcncli]1005> >}

五、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裡面有：

/>時，會發現圖片底部不是緊貼容器底部的，是img後面的空白字元造成，要消除必須這樣寫：

十、圖片和文字同行
大家知道img 的align 有text-top，middle，absmiddle啊什麼的，你可以嘗試去調整img 和文字讓他們在ie和ff下能一致，你會發現怎麼調都不會讓你滿意。索性讓img 和文字都 float起來，用margin 調整。
失去line-height。

文字

，很遺憾，在ie6下單行文字 line-height 效果消失了。 。 。 ，原因是這個inline-block元素和inline元素寫在一起了。解決方案：讓img 和文字都 float起來。