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

公司主營業(yè)務(wù)：成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)推出雷山免費(fèi)做網(wǎng)站回饋大家。

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

一.介紹

這篇文章包括了8個(gè)非常有用的解決辦法,在進(jìn)行CSS設(shè)計(jì)遇到問題時(shí)你就會(huì)用到它們。

二.針對(duì)瀏覽器的選擇器

這些選擇器在你需要針對(duì)某款瀏覽器進(jìn)行CSS設(shè)計(jì)時(shí)將非常有用.

IE6及其更低版本

*html{}

IE7及其更低版本

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

僅針對(duì)IE7

*:first-child+html{}

IE7和當(dāng)代瀏覽器

html>body{}

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

html>/**/body{}

Opera9及其更低版本

html:first-child{}

Safari

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

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

 
 
 

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

三.讓IE6支持PNG透明

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

你需要使用一個(gè)CSS濾鏡

 
 
 

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

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

FireFox下,當(dāng)你點(diǎn)擊一個(gè)超鏈接時(shí)會(huì)在外圍出現(xiàn)一個(gè)虛線輪廓.這很容易解決,只需要在標(biāo)簽樣式中加入outline:none.

 
 
 

  
  
  
a{  
  
  
  
outline:none;  
  
  
  
}  
  
  
  
 
 
 
 

五.給行內(nèi)元素定義寬度

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

,

,

, 和

• .你不能定義行內(nèi)元素的寬度,為了解決這個(gè)問題你可以將行內(nèi)元素轉(zhuǎn)變?yōu)閴K元素.

   

        
      
      
  
         
       
       
  span{width:150px;display:block}  
         
       
       
   
        
      
      

  六.讓固定寬度的頁面居中

  為了讓頁面在瀏覽器居中顯示,需要相對(duì)定位外層div,然后把margin設(shè)置為auto.

        
      
      
  
         
       
       
  #wrapper{  
         
       
       
  margin:auto;  
         
       
       
  position:relative;  
         
       
       
  }  
         
       
       
   
        
      
      

  七.圖片替換技術(shù)

  用文字總比用圖片做標(biāo)題好一些.文字對(duì)屏幕閱讀機(jī)和SEO都是非常友好的.

  HTML:

        
      
      
  
         
       
       
  Mainheadingonespan>h1> 
         
       
       
   
        
      
      

  CSS:

        
      
      
  
         
       
       
  h1{background:url(heading-image.gif)no-repeat;}  
         
       
       
  h1span{  
         
       
       
  position:absolute;  
         
       
       
  text-indent:-5000px;  
         
       
       
  }  
         
       
       
   
         
       
       
   
        
      
      

  你可以看到我們對(duì)標(biāo)題使用了標(biāo)準(zhǔn)的

  作為標(biāo)簽并且用CSS來將文本替換為圖片.text-indent屬性將文字推到了瀏覽器左邊5000px處,這樣對(duì)于瀏覽者來說就看不見了.

  關(guān)掉CSS,然后看看頭部會(huì)是什么樣子的.#p#

  八.最小寬度

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

  除IE6以外所有的瀏覽器你只需要一個(gè)min-width:Xpx;例如:

         
       
       
  
          
        
        
  .container{  
          
        
        
  min-width:300px;  
          
        
        
  }  
          
        
        
   
         
       
       

  為了讓他在IE6下工作,我們需要一些額外的工作.開始的時(shí)候我們需要?jiǎng)?chuàng)建兩個(gè)div,一個(gè)包含另一個(gè):

         
       
       
  
          
        
        
   
          
        
        
  Contentdiv> 
          
        
        
  div> 
          
        
        
   
         
       
       

  然后你需要定義外層div的min-width屬性

         
       
       
  
          
        
        
  .container{  
          
        
        
  min-width:300px;  
          
        
        
  }  
          
        
        
   
         
       
       

  這時(shí)該是IEhack大顯身手的時(shí)候了.你需要包含如下的代碼:

         
       
       
  
          
        
        
  *html.container{  
          
        
        
  border-right:300pxsolid#FFF;  
          
        
        
  }  
          
        
        
  *html.holder{  
          
        
        
  display:inline-block;  
          
        
        
  position:relative;  
          
        
        
  margin-right:-300px;  
          
        
        
  }  
          
        
        
   
          
        
        
  Asthebrowserwindowisresizedtheouter  
          
        
        
  divwidthreducestosuituntilitshrinkstotheborderwidth,  
          
        
        
  atwhichpointitwillnotshrinkanyfurther.  
          
        
        
  Theholderdivfollowssuitandalsostopsshrinking.  
          
        
        
  Theouterdivborderwidthbecomestheminimumwidthoftheinnerdiv.  
          
        
        
   
         
       
       

   九.隱藏水平滾動(dòng)條

  為了避免出現(xiàn)水平滾動(dòng)條,在body里加入overflow-x:hidden.

         
       
       
  
          
        
        
  body{overflow-x:hidden;}  
          
        
        
   
         
       
       

  當(dāng)你決定使用一個(gè)比瀏覽器窗口大的圖片或者flash時(shí),這個(gè)技巧將非常有用

  
  新聞名稱：CSSHACK和瀏覽器兼容問題的解決方法
  當(dāng)前路徑：http://fisionsoft.com.cn/article/cosipsi.html