CSS bug是布局中最頭疼的問(wèn)題。我們需要兼顧各種瀏覽器，以期待獲得一致的效果。非常遺憾的是各廠商之間的競(jìng)爭(zhēng)導(dǎo)致很多問(wèn)題的存在。而IE6與IE7在很多問(wèn)題上也存在著很大的差別。在webjx.com大量的技術(shù)文檔中，也包含了這方面的內(nèi)容。輕松的解決CSS bug是我們必須掌握的技能?，F(xiàn)在整理出最常用的12種CSS BUG解決方法以及CSS BUG類的小技巧。希望對(duì)您的學(xué)習(xí)、工作有所幫助新建一個(gè)前端學(xué)習(xí)qun438905713，在群里大多數(shù)都是零基礎(chǔ)學(xué)習(xí)者，大家相互幫助，相互解答，并且還準(zhǔn)備很多學(xué)習(xí)資料，歡迎零基礎(chǔ)的小伙伴來(lái)一起交流。



一、 針對(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; 
  
  } 
  
  
  
  
  
  您也可以參考—CSS hacks：瀏覽器特定選擇器介紹
  
  
  
  二、讓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"); 
  
  }
  
  
  
  
  
  三、移除超鏈接的虛線
  
  
  
  FireFox下,當(dāng)你點(diǎn)擊一個(gè)超鏈接時(shí)會(huì)在外圍出現(xiàn)一個(gè)虛線輪廓. 這很容易解決, 只需要在標(biāo)簽樣式中加入：
  
   
  
  
  
  outline:none.
  
  a{ 
  
  outline: none; 
  
  }
  
  
  
  
  
  您也可以參考—除鏈接元素的虛線框（兼容IE7、IE6、FF）
  
  
  
  四、給行內(nèi)元素定義寬度
  
  
  
  如果你給一個(gè)行內(nèi)元素定義寬度,那么它只是在IE6下有效. 所有的HTML元素要么是行內(nèi)元素要么就好是塊元素. 行內(nèi)元素包括: <span>, <a>, <strong> 和 <em>. 塊元素包括<div>, <p>, <h1>, <form>和<li> . 你不能定義行內(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; 
  
  }
  
  
  
  
  
  六、IE6雙倍邊距的bug
  
  
  
  給此對(duì)象加上display:inline即可解決問(wèn)題。具體介紹：
  
  
  
  七、Box Model 盒模型bug的一般解決辦法
  
  
  
  
  
  八、兩個(gè)層之間的3px間隙
  
  
  
  傳說(shuō)中的“IE 3px bug”，解決的辦法：
  
  
  
  九、在IE中的HTML注釋引起文字奇怪的復(fù)制
  
  
  
  Duplicate Characters Bug很神奇。
  
  
  
  十、圖片替換技術(shù)
  
  
  
  用文字總比用圖片做標(biāo)題好一些. 文字對(duì)屏幕閱讀機(jī)和SEO都是非常友好的.
  
   
  
  
  
  HTML:
  
  <h1><span>Main heading one</span></h1>
  
  CSS:
  
  h1 { background: url(heading-image.gif) no-repeat; } 
  
  h1 span { 
  
  position:absolute; 
  
  text-indent: -5000px; 
  
  } 
  
  
  
  
  
  你可以看到我們對(duì)標(biāo)題使用了標(biāo)準(zhǔn)的<h1>作為標(biāo)簽并且用css來(lái)將文本替換為圖片. text-indent屬性將文字推到了瀏覽器左邊5000px處, 這樣對(duì)于瀏覽者來(lái)說(shuō)就看不見(jiàn)了.
  
  關(guān)掉css,然后看看頭部會(huì)是什么樣子的.本文由webjx.com整理，轉(zhuǎn)載請(qǐng)注明出處！
  
  
  
  十一、 最小寬度
  
  
  
  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è):
  
   
  
  
  
  <div class="container"> 
  
  <div class="holder">Content</div> 
  
  </div>
  
  
  
  
  
  然后你需要定義外層div的min-width屬性，本文由webjx.com整理，轉(zhuǎn)載請(qǐng)注明出處！
  
   
  
  
  
  .container { 
  
  min-width:300px; 
  
  }
  
  
  
  
  
  這時(shí)該是IE hack大顯身手的時(shí)候了. 你需要包含如下的代碼:
  
   
  
  
  

• html .container { 
  
  border-right: 300px solid #FFF; 
  
  } 
  
• html .holder { 
  
  display: inline-block; 
  
  position: relative; 
  
  margin-right: -300px; 
  
  }
  
  
  
  
  
  As the browser window is resized the outer div width reduces to suit until it shrinks to the border width, at which point it will not shrink any further. The holder div follows suit and also stops shrinking. The outer div border width becomes the minimum width of the inner div.
  
  
  
  十二、隱藏水平滾動(dòng)條
  
  
  
  為了避免出現(xiàn)水平滾動(dòng)條, 在body里加入 overflow-x:hidden .
  
   
  
  
  
  body { overflow-x: hidden; }
  
  
  
  
  
  當(dāng)你決定使用一個(gè)比瀏覽器窗口大的圖片或者flash時(shí), 這個(gè)技巧將非常有用