WEB前端瀏覽器兼容性問題(pc端及移動(dòng)端)2021-02-03

PC端

 (一)html部分

1.H5新標(biāo)簽在IE9以下的瀏覽器識(shí)別 
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.js"></script>
<![endif]-->
html5shiv.js下載地址
https://github.com/aFarkas/html5shiv/releases

2.ul標(biāo)簽內(nèi)外邊距問題ul標(biāo)簽在IE6\IE7中吱殉,有個(gè)默認(rèn)的外邊距,但是在IE8以上及其他瀏覽器中有個(gè)默認(rèn)的內(nèi)邊距片择。解決方法:統(tǒng)一設(shè)置ul的內(nèi)外邊距為0

(二)CSS樣式的兼容性      

1.css的hack問題:主要針對(duì)IE的不同版本,不同的瀏覽器的寫法不同       
IE的條件注釋hack:       
<!--[if IE 6]>此處內(nèi)容只有IE6.0可見<![endif]-->          
<!--[if IE 7]>此處內(nèi)容只有IE7.0可見<![endif]-->

2.IE6雙邊距問題:IE6在浮動(dòng)后,又有橫向的margin新锈,此時(shí),該元素的外邊距是其值的2倍       
解決辦法:display:block;

3.IE6下圖片的下方有空隙      
解決方法:給img設(shè)置display:block;

4.IE6下兩個(gè)float之間會(huì)有個(gè)3px的bug       
解決辦法:給右邊的元素也設(shè)置float:left;

5.IE6下沒有min-width的概念眶熬,其默認(rèn)的width就是min-width

6.IE6下在使用margin:0 auto;無法使其居中       
解決辦法:為其父容器設(shè)置text-align:center;

7.被點(diǎn)擊過后的超鏈接不再具有hover和active屬性       
解決辦法:按lvha的順序書寫css樣式妹笆,
":link": a標(biāo)簽還未被訪問的狀態(tài)块请;
":visited": a標(biāo)簽已被訪問過的狀態(tài);
":hover": 鼠標(biāo)懸停在a標(biāo)簽上的狀態(tài)拳缠;
":active": a標(biāo)簽被鼠標(biāo)按著時(shí)的狀態(tài)墩新;

8.在使用絕對(duì)定位或者相對(duì)定位后,IE中設(shè)置z-index失效窟坐,原因是因?yàn)槠湓匾蕾囉诟冈氐膠-index海渊,但是父元素默認(rèn)為0, 子高父低哲鸳,所以不會(huì)改變顯示的順序

9.IE6下無法設(shè)置1px的行高臣疑,原因是由其默認(rèn)行高引起的       
解決辦法:為期設(shè)置overflow:hidden;或者line-height:1px;

(三)JavaScript的兼容性

1.標(biāo)準(zhǔn)的事件綁定方法函數(shù)為addEventListener,但I(xiàn)E下是attachEvent徙菠;

2.事件的捕獲方式不一致讯沈,標(biāo)準(zhǔn)瀏覽器是由外至內(nèi),而IE是由內(nèi)到外懒豹,但是最后的結(jié)果是將IE的標(biāo)準(zhǔn)定為標(biāo)準(zhǔn)

3.window.event獲取的芙盘。并且獲取目標(biāo)元素的方法也不同,標(biāo)準(zhǔn)瀏覽器是event.target脸秽,而IE下是event.srcElement

4.在低版本的IE中獲取的日期處理函數(shù)的值不是與1900的差值儒老,但是在高版本的IE中和標(biāo)準(zhǔn)瀏覽器保持了一致,獲取的值也是與1900的差值记餐。          
比如:var year= new Date().getYear();

5.ajax的實(shí)現(xiàn)方式不同驮樊,這個(gè)我所理解的是獲取XMLHttpRequest的不同,IE下是activeXObject

6.IE中不能操作tr的innerHtml7.獲得DOM節(jié)點(diǎn)的父節(jié)點(diǎn)片酝、子節(jié)點(diǎn)的方式不同
其他瀏覽器:parentNode  parentNode.childNodes       
IE:parentElement parentElement.children

移動(dòng)端

1.當(dāng)使用transform:translate3d(-50%,-50%,0)居中彈框(div)時(shí)囚衔,在pc端,內(nèi)部的文字會(huì)模糊雕沿。
解決辦法:給body定義樣式

body{
font-family: Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;
}

2.用position:absolute/fixed;把一個(gè)按鈕固定在頁(yè)面的底部练湿,在android系統(tǒng)中,當(dāng)調(diào)用輸入法時(shí)审轮,該按鈕會(huì)被頂起

解決辦法:使用媒體查詢@media screen and (max-width:400px){}當(dāng)頁(yè)面高度小于某一個(gè)值時(shí)蹂风,給元素一個(gè)top值

3.IOS系統(tǒng)調(diào)用第三方輸入法時(shí)手负,系統(tǒng)無法監(jiān)測(cè)到input的input础废、focus冗茸、change、blur事件

解決辦法:計(jì)算input值的length的長(zhǎng)度榴捡,判斷input的值是否變化

4.不同瀏覽器默認(rèn)margin杈女,padding不同。

*{margin:0;padding:0;}

5.不同瀏覽器的最小字體不同,有的是10px达椰,有的是12px

解決辦法:設(shè)置字體時(shí)翰蠢,不要小于12px,如果一定要小于12px,使用transform:sacle()進(jìn)行縮放

6.透明度opacity

解決辦法:IE8 以及更早的版本支持替代的 filter 屬性砰碴。例如:filter:Alpha(opacity=50)

7.文字兩端居中text-align:justify躏筏;text-align-last:just;在移動(dòng)端不起作用

解決辦法:使用&#160呈枉;代替空格

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市埃碱,隨后出現(xiàn)的幾起案子猖辫,更是在濱河造成了極大的恐慌,老刑警劉巖砚殿,帶你破解...
    沈念sama閱讀 207,113評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件啃憎,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡似炎,警方通過查閱死者的電腦和手機(jī)辛萍,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評(píng)論 2 381
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來羡藐,“玉大人贩毕,你說我怎么就攤上這事∑袜拢” “怎么了辉阶?”我有些...
    開封第一講書人閱讀 153,340評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)瘩扼。 經(jīng)常有香客問我谆甜,道長(zhǎng),這世上最難降的妖魔是什么集绰? 我笑而不...
    開封第一講書人閱讀 55,449評(píng)論 1 279
  • 正文 為了忘掉前任规辱,我火速辦了婚禮,結(jié)果婚禮上栽燕,老公的妹妹穿的比我還像新娘罕袋。我一直安慰自己,他們只是感情好纫谅,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,445評(píng)論 5 374
  • 文/花漫 我一把揭開白布炫贤。 她就那樣靜靜地躺著,像睡著了一般付秕。 火紅的嫁衣襯著肌膚如雪兰珍。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,166評(píng)論 1 284
  • 那天询吴,我揣著相機(jī)與錄音掠河,去河邊找鬼亮元。 笑死,一個(gè)胖子當(dāng)著我的面吹牛唠摹,可吹牛的內(nèi)容都是我干的爆捞。 我是一名探鬼主播,決...
    沈念sama閱讀 38,442評(píng)論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼勾拉,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼煮甥!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起藕赞,我...
    開封第一講書人閱讀 37,105評(píng)論 0 261
  • 序言:老撾萬榮一對(duì)情侶失蹤成肘,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后斧蜕,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體双霍,經(jīng)...
    沈念sama閱讀 43,601評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,066評(píng)論 2 325
  • 正文 我和宋清朗相戀三年批销,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了洒闸。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,161評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡均芽,死狀恐怖丘逸,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情骡技,我是刑警寧澤鸣个,帶...
    沈念sama閱讀 33,792評(píng)論 4 323
  • 正文 年R本政府宣布,位于F島的核電站布朦,受9級(jí)特大地震影響囤萤,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜是趴,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,351評(píng)論 3 307
  • 文/蒙蒙 一涛舍、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧唆途,春花似錦富雅、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至温赔,卻和暖如春蛤奢,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評(píng)論 1 261
  • 我被黑心中介騙來泰國(guó)打工啤贩, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留待秃,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 45,618評(píng)論 2 355
  • 正文 我出身青樓痹屹,卻偏偏與公主長(zhǎng)得像章郁,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子志衍,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,916評(píng)論 2 344

推薦閱讀更多精彩內(nèi)容