一尔许、什么是瀏覽器兼容問題
所謂瀏覽器兼容問題就是指不同瀏覽器或同種瀏覽器不同版本對相同代碼解析效果不同溯泣,瀏覽器兼容問題主要有如下表現(xiàn)
?1.頁面中的元素的默認值不同
?2.同種代碼在不同瀏覽器下解析效果不同
二霜定、為什么會出現(xiàn)瀏覽器兼容問題
瀏覽器中最重要的程序被稱為”渲染引擎”啸臀,也稱為瀏覽器內核,它的作用就是用來解析HTML標簽和CSS代碼爆侣。不同的瀏覽器的瀏覽器內核不同恩闻,導致它們對同一段代碼的解析效果也不同艺糜,這就是瀏覽器兼容問題產生的直接原因。
三、常見的瀏覽器兼容問題及解決方法
1.圖片下方有間隙破停,解決方法:將圖片變成塊元素翅楼,即設置img{display:block}
2.圖片間有間隙,解決方法:
1)將HTML代碼寫在一行上
2)給父元素font-size設置為0
3)給圖片設置float屬性
3.圖片加超鏈接后真慢,在IE瀏覽器下有邊框毅臊,解決方法:給圖片設置img{border:none}
4.圖片設置超鏈接后,如果要加鼠標滑過顯示邊框效果黑界,那么默認情況下邊框只顯示一半管嬉,解決方法:給超鏈接設置a{display:block;}
5.行內塊元素上下錯位問題,解決方法:給行內塊元素設置vertical-align:top/middle/bottom
6.不同瀏覽器下margin和padding的默認值不同园爷,解決方法是:設置*{margin:0;padding:0}
7.上下結構的兩個元素宠蚂,兩者間的距離是較大的margin值,解決方法:給兩個元素設置浮動
8.兩個父子關系的元素童社,如果子元素設置了浮動,且子元素設置了margin-left著隆,那么在IE6下面margin-left的值加倍扰楼,解決方法:將子元素設置為display:inline
9.父子關系的兩個元素,當給子元素設置了margin-top的時候美浦,那么父元素和子元素同步下移弦赖,解決方法
1)在給子元素加margin-top的同時,給父元素加邊框
2)在給子元素加margin-top的同時浦辨,給父元素加padding-top:0.1px;
3)在給子元素加margin-top的同時蹬竖,給父元素設置float屬性
4)不給子元素加margin-top,給父元素加padding-top
10.兩個兄弟元素流酬,當給第一個元素設置了浮動后币厕,在IE6下面兩各元素會在一行顯示,且兩者間有3px間隙芽腾,解決方法:將第二個元素設置float
11.元素默認的高度為自適應高度旦装,當元素沒有內容時,元素的高度為0摊滔,如果給元素設置高度阴绢,那么內容多的時候,內容會出現(xiàn)溢出現(xiàn)象艰躺,此時如果要實現(xiàn)這一效果呻袭,即元素沒有內容時有一個最小高度,元素有內容且內容很多時元素的高度由內容撐起來腺兴,此時需要給元素加min-height屬性左电,該屬性的作用就是給元素設置一個最小高度,但是IE6下面不支持min-height屬性,解決方法是給元素加如下代碼:height:auto!important;height:IE6下面的最小高度券腔,簡言之伏穆,如果讓所有瀏覽器都具有最小高度,就在元素中加如下三句話:
div{min-height:谷歌纷纫、火狐瀏覽器下的最小高度枕扫;height:auto!important;height:IE6下面的最小高度}
12.元素中的文本內容垂直居中問題辱魁,解決方法:設置行高和高度相同烟瞧,如果行高小于高度,那么內容在中分線以上染簇,如果行高高于高度那么內容在中分線以下
13.IE低版本瀏覽器不支持將:hover加在非超鏈接元素上参滴,解決方法是將hover效果加載超鏈接上
14.清除浮動時使用.clearFloat類,IE6下面不起作用锻弓,原因是clearFloat所在元素沒有寬度砾赔,解決方法:
1)給父元素一個固定寬度
2)給父元素加zoom:1
15.清除浮動時使用overflow:hidden,IE6下面不起作用青灼,原因是父元素沒有固定寬度暴心,解決方法
1)給父元素加一個固定寬度
2)給父元素加zoom:1
四、CSSHACK
所謂CSSHACK也是解決瀏覽器兼容的一種方法杂拨,它是指網(wǎng)頁開發(fā)人員針對不同的瀏覽器寫出不同的CSS代碼专普,CSSHACK包含以下幾種形式
1.IE條件注釋
2.選擇器hack
3.屬性hack
4.!important
五弹沽、IE條件注釋
所謂IE條件注釋主要是針對IE不同版本的瀏覽器所寫出的CSS代碼涕癣,格式如下
1.格式1:判斷是否是IE瀏覽器
<!--[if ie]>
樣式表
<![endif]-->
2.格式2:判斷是否是IE的某個版本
<!—[if ie 版本號]>
樣式表
<![endif]-->
3.格式3:判斷是否符合某個范圍预厌,表示方位的方法是
1)gt:大于
2)lt:小于
3)gte:大于等于
4)lte:小于等于
5)!:不等于
<!—[if 范圍 ie 版本]>
樣式表
<![endif]-->
六、選擇符hack
就是指通過修飾選擇符進而針對不同的IE瀏覽器給出不同的樣式,形式有:
1.html 選擇符{樣式}:針對的是IE6
2.+html 選擇符{樣式}:針對的是IE7
七洞翩、屬性hack
就是指通過修飾屬性名稱放刨,進而針對不同的IE瀏覽器給出不同的樣式
.header{_width:100px;} /*ie6專用*/
.header{*+width:100px;} /*ie7專用*/
.header{*width:100px;} /*ie6蟀瞧,ie7共用*/
.header{width:100px\0;} /*ie8,ie9共用*/
.header{width:100px\9;} /*ie6,ie7,ie8,ie9共用*/
.header{_width:300px\9\0;} /*ie9專用*/
八金闽、!important
提示樣式的優(yōu)先級促脉,它的優(yōu)先級最高辰斋,高于行內樣式