CSS瀏覽器兼容解決方案

CSS瀏覽器兼容

解決方案Bug及Bug修復一、雙空白邊浮動Bug在IE6及以下的版本中存在解決：

display:inline;(顯示：內嵌）二、3像素文本偏移當文本與一個浮動相鄰，IE6及以下版本在解析浮動元素與流動文本環(huán)繞時出現(xiàn)。<divid="float">浮動元素</div><divid="flow">

流動文本1<br/>

流動文本2<br/>

流動文本3<br/>

流動文本4<br/>

流動文本5<br/>

流動文本6<br/>

流動文本7<br/>

流動文本8<br/> </div>

#float{

float:left; width:100px; height:100px; border:4pxredsolid;}#flow{ border:4pxsolidblue; margin-left:120px; }*html#float{

margin-right:-3px; }*html#flow{ height:1%;強制布局

}三、重復字符Bug在IE6版本瀏覽器中，如果浮動元素的第一個和最后一個元素之間有多個注釋時導致重復字符出現(xiàn)。<div>文本行1</div><!--aaa--><div>文本行2</div><div>文本行3</div><!--bbb--><div>文本行4</div>文本行1文本行2文本行3文本行44捉迷藏Bug<divid="content"> <divid="left">

左側欄目<br/>

左側欄目<br/>

左側欄目<br/> ... </div> <divid="right">

右側欄目<br/>

右側欄目<br/>

右側欄目<br/> ... </div> <divid="bottom">

底部欄目

... </div></div>#content{

background:#EEE8AA;}#left{

float:left; border:1pxsolidred; width:200px; height:200px;}#bottom{

clear:both; height:50px; width:100%;}解決方案去除父元素的背景色為父元素指定固定高度和寬度為父元素和浮動元素定義

position:relative;百分比Bug#content{width:403px;}#left,#right{

float:left;width:50%;height:100px;}<divid="content"> <divid="left"></div> <divid="right"></div></div>IE對百分比計算方法是四舍五入；Firefox是忽略小數(shù)部分，但會把多出的長度分配給每個元素；Netscape忽略小數(shù)部分，多出部分透明顯示。解決方法：右側子元素中clear:right;項目符號隱藏Bug<divid="left"></div><divid="right"> <ul> <li>列表項1</li> <li>列表項2</li> <li>列表項3</li> </ul></div>#left{ width:100px; height:100px;

float:left;

border:solid1pxred; }#right{ width:400px;

float:left;

border:solid1pxblue; }ul{ margin:0; padding:0; }列表左邊起始位置是內容，而不是列表符，當列表補白值設為0時，實際位置是負值，產生了隱藏。解決方法#right{padding-left:10px;/*IE5.0*/paddin\g-left:15px;/*IE6.0*/}瀏覽器默認樣式1、頁邊距

IE

margin:0

FF(firefox):padding:02、居中

IE

margin-left:automargin-right:autoFFtext-align:centerIE7瀏覽器兼容1、盒模型溢出<divid="box"><divid="sub_content">內容</div></div>#box{ width:100px; height:100px;

border:doublered2px; }#sub_content