CSS bug是布局中最頭疼的問題。我們需要兼顧各種浏覽器，以期待獲得一致的效果。非常遺憾的是各廠商之間的競爭導致很多問題的存在。而IE6與IE7在很多問題上也存在著很大的差別。輕松的解決CSS bug是我們必須掌握的技能。現在整理出最常用的12種CSS BUG解決方法以及CSS BUG類的小技巧。
一、 針對浏覽器的選擇器這些選擇器在你需要針對某款浏覽器進行css設計時將非常有用.
* 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;
}
www.52css.com]
* html #content-box {
width: 250px;
} 您也可以參考—CSS hacks：浏覽器特定選擇器介紹
http://www.52css.com/article.asp?id=635
二、讓IE6支持PNG透明一個IE6的Bug引起了大麻煩, 他不支持透明的PNG圖片。
你需要使用一個css濾鏡.52css.com]
*html #image-style {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fil
ename.png", sizingMethod="scale");
}
三、移除超鏈接的虛線FireFox下,當你點擊一個超鏈接時會在外圍出現一個虛線輪廓. 這很容易解決, 只需要在標簽樣式中加入：本文由52CSS.com整理，轉載請注明出處！.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> . 你不能定義行內元素的寬度, 為了解決這個問題你可以將行內元素轉變為塊元素.
span { width: 150px; display: block }五、讓固定寬度的頁面居中為了讓頁面在浏覽器居中顯示, 需要相對定位外層div, 然後把margin設置為auto. [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都是非常友好的.
<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處, 這樣對於浏覽者來說就看不見了.
十一、 最小寬度IE6另外一個bug就是它不支持 min-width 屬性. min-width又是相當有用的, 特別是對於彈性模板來說, 它們有一個100%的寬度,min-width 可以告訴浏覽器何時就不要再壓縮寬度了.
除IE6以外所有的浏覽器你只需要一個 min-width: Xpx; 例如:.52css.com]
.container {
min-width:300px;
}為了讓他在IE6下工作, 我們需要一些額外的工作. 開始的時候我們需要創建兩個div, 一個包含另一個:.52css.com]
<div class="container">
<div class="holder">Content</div>
</div>然後你需要定義外層div的min-width屬性，本文由52CSS.com整理，轉載請注明出處！.52css.com]
.container {
min-width:300px;
}
這時該是IE hack大顯身手的時候了. 你需要包含如下的代碼:.52css.com]
* html .container {
border-right: 300px solid #FFF;
}
* html .holder {
display: inline-block;
position: relative;
margin-right: -300px;
}十二、隱藏水平滾動條為了避免出現水平滾動條, 在body裡加入 overflow-x:hidden .
body { overflow-x: hidden; }當你決定使用一個比浏覽器窗口大的圖片或者flash時, 這個技巧將非常有用.