CSS HACK和瀏覽器兼容問題的解決方法

作者：admin 2010-08-30 15:40:31

開發前端

瀏覽器兼容問題是個棘手的問題，這里和大家分享一下CSS HACK和瀏覽器兼容問題的解決方法，希望對你的學習有所幫助。

以下的文章主要像大家重點討論一下CSS HACK和瀏覽器兼容問題的解決方法，這里包括了8個非常有用的解決辦法,在進行CSS設計遇到問題時你就會用到它們。

CSS HACK和瀏覽器兼容問題的解決方法

一.介紹

這篇文章包括了8個非常有用的解決辦法,在進行CSS設計遇到問題時你就會用到它們。

二.針對瀏覽器的選擇器

這些選擇器在你需要針對某款瀏覽器進行CSS設計時將非常有用.

IE6及其更低版本

*html{}

IE7及其更低版本

*:first-child+html{}*html{}

僅針對IE7

*:first-child+html{}

IE7和當代瀏覽器

html>body{}

僅當代瀏覽器(IE7不適用)

html>/**/body{}

Opera9及其更低版本

html:first-child{}

Safari

html[xmlns*=""]body:last-child{}

要使用這些選擇器,請將它們放在樣式之前.例如:

#content-box{  
width:300px;  
height:150px;  
}  
*html  
#content-box{  
width:250px;  
}/*overridestheabovestyleandchanges  
thewidthto250pxinIE6andbelow*/

三.讓IE6支持PNG透明

一個IE6的Bug引起了大麻煩,他不支持透明的PNG圖片.

你需要使用一個CSS濾鏡

*html#image-style{  
background-image:none;  
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fil  
ename.png",sizingMethod="scale");  
}

#p#四.移除超鏈接的虛線(僅對FF有效)

FireFox下,當你點擊一個超鏈接時會在外圍出現一個虛線輪廓.這很容易解決,只需要在標簽樣式中加入outline:none.

a{  
outline:none;  
}

五.給行內元素定義寬度

如果你給一個行內元素定義寬度,那么它只是在IE6下有效.所有的HTML元素要么是行內元素要么就好是塊元素.行內元素包括:,,和.塊元素包括 DIV CSS編碼時必須注意的細節

和

.你不能定義行內元素的寬度,為了解決這個問題你可以將行內元素轉變為塊元素.
```
span{width:150px;display:block}  
 
```
六.讓固定寬度的頁面居中

為了讓頁面在瀏覽器居中顯示,需要相對定位外層div,然后把margin設置為auto.
```
#wrapper{  
margin:auto;  
position:relative;  
}  
 
```
七.圖片替換技術

用文字總比用圖片做標題好一些.文字對屏幕閱讀機和SEO都是非常友好的.

HTML:
```
<h1><span>Mainheadingonespan>h1> 
 
```
CSS:
```
h1{background:url(heading-image.gif)no-repeat;}  
h1span{  
position:absolute;  
text-indent:-5000px;  
}  
 
 
```
你可以看到我們對標題使用了標準的
作為標簽并且用CSS來將文本替換為圖片.text-indent屬性將文字推到了瀏覽器左邊5000px處,這樣對于瀏覽者來說就看不見了.

關掉CSS,然后看看頭部會是什么樣子的.#p#

八.最小寬度

IE6另外一個bug就是它不支持min-width屬性.min-width又是相當有用的,特別是對于彈性模板來說,它們有一個100%的寬度,min-width可以告訴瀏覽器何時就不要再壓縮寬度了.

除IE6以外所有的瀏覽器你只需要一個min-width:Xpx;例如:
```
.container{  
min-width:300px;  
}  
 
```
為了讓他在IE6下工作,我們需要一些額外的工作.開始的時候我們需要創建兩個div,一個包含另一個:
```
<divclassdivclass="container"> 
<divclassdivclass="holder">Contentdiv> 
div> 
 
```
然后你需要定義外層div的min-width屬性
```
.container{  
min-width:300px;  
}  
 
```
這時該是IEhack大顯身手的時候了.你需要包含如下的代碼:
```
*html.container{  
border-right:300pxsolid#FFF;  
}  
*html.holder{  
display:inline-block;  
position:relative;  
margin-right:-300px;  
}  
 
Asthebrowserwindowisresizedtheouter  
divwidthreducestosuituntilitshrinkstotheborderwidth,  
atwhichpointitwillnotshrinkanyfurther.  
Theholderdivfollowssuitandalsostopsshrinking.  
Theouterdivborderwidthbecomestheminimumwidthoftheinnerdiv.  
 
```
九.隱藏水平滾動條

為了避免出現水平滾動條,在body里加入overflow-x:hidden.
```
body{overflow-x:hidden;}  
 
```
當你決定使用一個比瀏覽器窗口大的圖片或者flash時,這個技巧將非常有用

【編輯推薦】

責任編輯：佚名來源： css3-html5.com

CSS 瀏覽器兼容