常見瀏覽器兼容問題及解決

一尔许、什么是瀏覽器兼容問題
所謂瀏覽器兼容問題就是指不同瀏覽器或同種瀏覽器不同版本對相同代碼解析效果不同溯泣,瀏覽器兼容問題主要有如下表現(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)先級最高辰斋,高于行內樣式

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市瘸味,隨后出現(xiàn)的幾起案子宫仗,更是在濱河造成了極大的恐慌,老刑警劉巖旁仿,帶你破解...
    沈念sama閱讀 211,042評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件藕夫,死亡現(xiàn)場離奇詭異孽糖,居然都是意外死亡,警方通過查閱死者的電腦和手機毅贮,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,996評論 2 384
  • 文/潘曉璐 我一進店門办悟,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人滩褥,你說我怎么就攤上這事病蛉。” “怎么了瑰煎?”我有些...
    開封第一講書人閱讀 156,674評論 0 345
  • 文/不壞的土叔 我叫張陵铺然,是天一觀的道長。 經常有香客問我酒甸,道長魄健,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,340評論 1 283
  • 正文 為了忘掉前任插勤,我火速辦了婚禮沽瘦,結果婚禮上,老公的妹妹穿的比我還像新娘饮六。我一直安慰自己其垄,他們只是感情好,可當我...
    茶點故事閱讀 65,404評論 5 384
  • 文/花漫 我一把揭開白布卤橄。 她就那樣靜靜地躺著,像睡著了一般臂外。 火紅的嫁衣襯著肌膚如雪窟扑。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,749評論 1 289
  • 那天漏健,我揣著相機與錄音嚎货,去河邊找鬼。 笑死蔫浆,一個胖子當著我的面吹牛殖属,可吹牛的內容都是我干的。 我是一名探鬼主播瓦盛,決...
    沈念sama閱讀 38,902評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼洗显,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了原环?” 一聲冷哼從身側響起挠唆,我...
    開封第一講書人閱讀 37,662評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎嘱吗,沒想到半個月后玄组,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 44,110評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年俄讹,在試婚紗的時候發(fā)現(xiàn)自己被綠了哆致。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,577評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡患膛,死狀恐怖摊阀,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情剩瓶,我是刑警寧澤驹溃,帶...
    沈念sama閱讀 34,258評論 4 328
  • 正文 年R本政府宣布,位于F島的核電站延曙,受9級特大地震影響豌鹤,放射性物質發(fā)生泄漏。R本人自食惡果不足惜枝缔,卻給世界環(huán)境...
    茶點故事閱讀 39,848評論 3 312
  • 文/蒙蒙 一布疙、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧愿卸,春花似錦灵临、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,726評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至发钝,卻和暖如春顿涣,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背酝豪。 一陣腳步聲響...
    開封第一講書人閱讀 31,952評論 1 264
  • 我被黑心中介騙來泰國打工涛碑, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人孵淘。 一個月前我還...
    沈念sama閱讀 46,271評論 2 360
  • 正文 我出身青樓蒲障,卻偏偏與公主長得像,于是被迫代替她去往敵國和親瘫证。 傳聞我的和親對象是個殘疾皇子揉阎,可洞房花燭夜當晚...
    茶點故事閱讀 43,452評論 2 348

推薦閱讀更多精彩內容