12種CSS BUG解決方法與技巧(ie6,7較老版本- - )

1、 針對瀏覽器的選擇器 
　　這些選擇器在你須要針對某款瀏覽器進行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 
#content-box { 
width: 300px; 
height: 150px; 
} 
Example Source Code 
* html #content-box { 
width: 250px; 
} 
2、讓IE6支持PNG透明 
　　一個IE6的Bug引發了大麻煩, 他不支持透明的PNG圖片。 
　　你須要使用一個css濾鏡 
Example Source Code 
*html #image-style { 
background-image: none; 
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fil 
ename.png", sizingMethod="scale"); 
} 
3、移除超連接的虛線 
　　FireFox下,當你點擊一個超連接時會在外圍出現一個虛線輪廓. 這很容易解決, 只須要在標籤樣式中加入：本文由52CSS.com整理，轉載請註明出處！ 
Example Source Code 
outline:none. 
a{ 
outline: none; 
} 
4、給行內元素定義寬度 
　　若是你給一個行內元素定義寬度,那麼它只是在IE6下有效. 全部的HTML元素要麼是行內元素要麼就好是塊元素. 行內元素包括: <span>, <a>, <strong> 和 <em>. 塊元素包括<div>, <p>, <h1>, <form>和<li> . 你不能定義行內元素的寬度, 爲了解決這個問題你能夠將行內元素轉變爲塊元素. 
Example Source Code 
span { width: 150px; display: block } 
5、讓固定寬度的頁面居中 
　　爲了讓頁面在瀏覽器居中顯示, 須要相對定位外層div, 而後把margin設置爲auto. 
Example Source Code 
#wrapper { 
margin: auto; 
position: relative; 
} 
6、IE6雙倍邊距的bug 
　 
7、Box Model 盒模型bug的通常解決辦法 
　 
8、兩個層之間的3px間隙 
9、在IE中的HTML註釋引發文字奇怪的複製 
10、圖片替換技術 
　　用文字總比用圖片作標題好一些. 文字對屏幕閱讀機和SEO都是很是友好的. 
Example Source Code 
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整理，轉載請註明出處！ 
11、 最小寬度 
　　IE6另一個bug就是它不支持 min-width 屬性. min-width又是至關有用的, 特別是對於彈性模板來講, 它們有一個100%的寬度,min-width 能夠告訴瀏覽器什麼時候就不要再壓縮寬度了. 
除IE6之外全部的瀏覽器你只須要一個 min-width: Xpx; 例如: 
Example Source Code 
.container { 
min-width:300px; 
} 
　　爲了讓他在IE6下工做, 咱們須要一些額外的工做. 開始的時候咱們須要建立兩個div, 一個包含另外一個: 
Example Source Code 
<div class="container"> 
<div class="holder">Content</div> 
</div> 
　　而後你須要定義外層div的min-width屬性，本文由52CSS.com整理，轉載請註明出處！ 
Example Source Code 
.container { 
min-width:300px; 
} 
這時該是IE hack大顯身手的時候了. 你須要包含以下的代碼: 
Example Source Code 
* 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. 
12、隱藏水平滾動條 
　　爲了不出現水平滾動條, 在body里加入 overflow-x:hidden . 
Example Source Code 
body { overflow-x: hidden; } 
　　當你決定使用一個比瀏覽器窗口大的圖片或者flash時, 這個技巧將很是有用