快捷導(dǎo)航

Css瀏覽器兼容的解決方法

更新時間：2013年11月08日 10:25:26 作者：

本文總結(jié)一些常用的Css中的瀏覽器兼容性問題及解決方案

一、網(wǎng)頁背景半透明
網(wǎng)頁背景半透明

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');
}
 

二、清除浮動

復(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;}

三、浮動IE6雙邊距
1、為浮動元素使用display:inline;
2、IE6下3px間距bug：在IE6中，當(dāng)文本（或無浮動元素）跟在一個浮動的元素之后，文本和這個浮動元素之間會多出3px的間隔，給浮動層添加display:inline或設(shè)計-3px的間距來解決這個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
一般來講，ie對父級的要求比較高，如果父級有position屬性，但是沒有給z-index屬性，那默認(rèn)都是0，所以不論子集里面有多高的z-index屬性，都是沒用的。
所以一般情況下，需要給包含z-index屬性的父級一個z-index:1的屬性，這樣可以解決很多莫名其妙的問題。
六、IE6調(diào)整窗口大小的bug
當(dāng)把body居中放置，改變IE瀏覽器大小的時候，任何在body里面的相對定位元素就會固定不動了，解決方法是給body定義position:relative;就行了。
七、文字大小和行高不兼容
同樣大小的相同字體，各瀏覽器下行高和大小不一樣，需要設(shè)定line-height。
八、mirror margin bug
在IE6下，當(dāng)外層元素內(nèi)有float元素時，外層元素如定義margin-top:5px，將自動生成margin-bottom:5px，padding也會出現(xiàn)類似問題，解決方案：外層元素設(shè)定border或float。
九、img下的留白
在html里面有：
<div>
<img src=”" mce_src=”" />
</div><img …/>時，會發(fā)現(xiàn)圖片底部不是緊貼著容器底部的，是img后面的空白字符造成，要消除必須這樣寫：
<div>
<img src=”" mce_src=”" /></div>后面兩個標(biāo)簽要緊挨著。IE7下這個bug依然存在，解決方案：display:block。
十、圖片和文字同行
大家知道img 的align 有 text-top，middle，absmiddle啊什么的，你可以嘗試去調(diào)整img 和文字讓他們在ie和ff下能一致，你會發(fā)現(xiàn)怎么調(diào)都不會讓你滿意。索性讓img 和文字都 float起來，用margin 調(diào)整。
失去line-height。<div style=”line-height:20px”><img />文字</div>，很遺憾，在ie6下單行文字 line-height 效果消失了。。。，原因是<img />這個inline-block元素和inline元素寫在一起了。解決方案：讓img 和文字都 float起來。