,

,

和

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

   

  span{width:150px;display:block}  
   

  六.讓固定寬度的頁(yè)面居中

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

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

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

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

  HTML:

  <h1><span>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來(lái)將文本替換為圖片.text-indent屬性將文字推到了瀏覽器左邊5000px處,這樣對(duì)于瀏覽者來(lái)說(shuō)就看不見(jiàn)了.

   

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

  八.最小寬度

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

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

  .container{  
  min-width:300px;  
  }  
   

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

  <divclassdivclass="container"> 
  <divclassdivclass="holder">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è)技巧將非常有用

  【編輯推薦】

  1.  
  2. IE6、IE7、Firefox中margin問(wèn)題解決辦法
  3. DIV CSS隱藏內(nèi)容樣式方法詳解
  4. CSS兼容：解決IE6、IE7和IE8的兼容問(wèn)題妙招
  5. DIV CSS網(wǎng)頁(yè)布局需要掌握的八大技巧