最常用的12種CSS BUG解決方案與技巧

CSS bug是布局中最頭疼的問題。我們需要兼顧各種瀏覽器，以期待獲得一致的效果。非常遺憾的是各廠商之間的競爭導致很多問題的存在。而IE6與 IE7在很多問題上也存在著很大的差別。在52CSS.com大量的技術文檔中，也包含了這方面的內容。輕鬆的解決CSS bug是我們必須掌握的技能。 現在整理出最常用的12種CSS BUG解決方案以及CSS BUG類的小技巧。希望對您的學習、工作有所協助，如果您依然有疑問，歡迎您到 52CSS.com查閱、搜尋相關內容。

一、 針對瀏覽器的選取器

這些選取器在你需要針對某款瀏覽器進行css設計時將非常有用.
IE6及其更低版本，本文由52CSS.com整理，轉載請註明出處！
* 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 {}
要使用這些選取器,請將它們放在樣式之前. 例如:

Example Source Code [www.52css.com]#content-box { 
width: 300px; 
height: 150px; 
} 

Example Source Code [www.52css.com]* html #content-box { 
width: 250px; 
} 

您也可以參考—CSS hacks：瀏覽器特定選取器介紹
http://www.52css.com/article.asp?id=635

二、讓IE6支援PNG透明

一個IE6的Bug引起了大麻煩, 他不支援透明的PNG圖片。
你需要使用一個css濾鏡

Example Source Code [www.52css.com]*html #image-style { 
background-image: none; 
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fil 
ename.png", sizingMethod="scale"); 
}

三、移除超連結的虛線

FireFox下,當你點擊一個超連結時會在外圍出現一個虛線輪廓. 這很容易解決, 只需要在標籤樣式中加入：本文由52CSS.com整理，轉載請註明出處！

Example Source Code [www.52css.com]outline:none.
a{ 
outline: none; 
}

您也可以參考—除連結元素的虛線框（相容IE7、IE6、FF）
http://www.52css.com/article.asp?id=743

四、給行內元素定義寬度

如果你給一個行內元素定義寬度,那麼它只是在IE6下有效. 所有的HTML元素要麼是行內元素要麼就好是塊元素. 行內元素包 括: <span>, <a>, <strong> 和 <em>. 塊元素包 括<div>, <p>, <h1>, <form>和<li> . 你不能定義行內元素 的寬度, 為瞭解決這個問題你可以將行內元素轉變為塊元素.

Example Source Code [www.52css.com]span { width: 150px; display: block }

五、讓固定寬度的頁面置中

為了讓頁面在瀏覽器置中顯示, 需要相對定位外層div, 然後把margin設定為auto.

Example Source Code [www.52css.com]#wrapper { 
margin: auto; 
position: relative; 
}

六、IE6雙倍邊距的bug

給此對象加上display:inline即可解決問題。具體介紹：
http://www.52css.com/article.asp?id=144

七、Box Model 盒模型bug的一般解決辦法

這是一個臭名昭著的問題了，詳情參考這裡：
http://www.52css.com/article.asp?id=106

八、兩個層之間的3px間隙

傳說中的“IE 3px bug”，解決的辦法：
http://www.52css.com/article.asp?id=146

九、在IE中的HTML注釋引起文字奇怪的複製

Duplicate Characters Bug很神奇，具體的解決辦法：
http://www.52css.com/article.asp?id=440

十、圖片替換技術

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

Example Source Code [www.52css.com]HTML:
<h1><span>Main heading one</span></h1>
CSS:
h1 { background: url(heading-image.gif) no-repeat; } 
h1 span { 
position:absolute; 
text-indent: -5000px; 
} 

你可以看到我們對標題使用了標準的<h1>作為標籤並且用css來將文本替換為圖片. text-indent屬性將文字推到了瀏覽器左邊5000px處, 這樣對於瀏覽者來說就看不見了.
關掉css,然後看看頭部會是什麼樣子的.本文由52CSS.com整理，轉載請註明出處！

十一、 最小寬度

IE6另外一個bug就是它不支援 min-width 屬性. min-width又是相當有用的, 特別是對於彈性模板來說, 它們有一個100%的寬度,min-width 可以告訴瀏覽器何時就不要再壓縮寬度了.
除IE6以外所有的瀏覽器你只需要一個 min-width: Xpx; 例如:

Example Source Code [www.52css.com].container { 
min-width:300px; 
}

為了讓他在IE6下工作, 我們需要一些額外的工作. 開始的時候我們需要建立兩個div, 一個包含另一個:

Example Source Code [www.52css.com]<div class="container"> 
<div class="holder">Content</div> 
</div>

然後你需要定義外層div的min-width屬性，本文由52CSS.com整理，轉載請註明出處！

Example Source Code [www.52css.com].container { 
min-width:300px; 
}

這時該是IE hack大顯身手的時候了. 你需要包含如下的代碼:

Example Source Code [www.52css.com]* 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.

十二、隱藏水平捲軸

為了避免出現水平捲軸, 在body裡加入 overflow-x:hidden .

Example Source Code [www.52css.com]body { overflow-x: hidden; }

當你決定使用一個比瀏覽器視窗大的圖片或者flash時, 這個技巧將非常有用.