成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

如何機(jī)制地回答瀏覽器兼容性問(wèn)題

Rindia / 2400人閱讀

摘要：前言有過(guò)面試經(jīng)驗(yàn)的同學(xué)應(yīng)該都被問(wèn)過(guò)瀏覽器兼容性的問(wèn)題，對(duì)于面試官的問(wèn)題，常常猝不及防，因?yàn)橥ǔＫ麄兌际沁@么問(wèn)的。來(lái)談?wù)劄g覽器兼容的問(wèn)題吧，你對(duì)瀏覽器的兼容性有了解過(guò)嗎，那么如何才是我們正確回答這個(gè)問(wèn)題的姿勢(shì)呢。

前言

有過(guò)面試經(jīng)驗(yàn)的同學(xué)應(yīng)該都被問(wèn)過(guò)瀏覽器兼容性的問(wèn)題，對(duì)于面試官的問(wèn)題，常常猝不及防，因?yàn)橥ǔＫ麄兌际沁@么問(wèn)的。"來(lái)談?wù)劄g覽器兼容的問(wèn)題吧"，"你對(duì)瀏覽器的兼容性有了解過(guò)嗎"，那么如何才是我們正確回答這個(gè)問(wèn)題的姿勢(shì)呢。

雖然面試官的問(wèn)題十分的籠統(tǒng)，瀏覽器的兼容性無(wú)非還是樣式兼容性（css），交互兼容性（javascript），瀏覽器 hack 三個(gè)方面。
樣式兼容性（css）方面

因?yàn)闅v史原因，不同的瀏覽器樣式存在差異，可以通過(guò) Normalize.css 抹平差異，也可以定制自己的 reset.css，例如通過(guò)通配符選擇器，全局重置樣式

* { margin: 0; padding: 0; }

在CSS3還沒(méi)有成為真正的標(biāo)準(zhǔn)時(shí)，瀏覽器廠商就開始支持這些屬性的使用了。CSS3樣式語(yǔ)法還存在波動(dòng)時(shí)，瀏覽器廠商提供了針對(duì)瀏覽器的前綴，直到現(xiàn)在還是有部分的屬性需要加上瀏覽器前綴。在開發(fā)過(guò)程中我們一般通過(guò)IDE開發(fā)插件、css 預(yù)處理器以及前端自動(dòng)化構(gòu)建工程幫我們處理。

瀏覽器內(nèi)核與前綴的對(duì)應(yīng)關(guān)系如下

內(nèi)核 主要代表的瀏覽器 前綴
Trident IE瀏覽器 -ms
Gecko Firefox -moz
Presto Opera -o
Webkit Chrome和Safari -webkit

在還原設(shè)計(jì)稿的時(shí)候我們常常會(huì)需要用到透明屬性，所以解決 IE9 以下瀏覽器不能使用 opacit。

opacity: 0.5;
filter: alpha(opacity = 50); //IE6-IE8我們習(xí)慣使用filter濾鏡屬性來(lái)進(jìn)行實(shí)現(xiàn)
filter: progid:DXImageTransform.Microsoft.Alpha(style = 0, opacity = 50); //IE4-IE9都支持濾鏡寫法progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)

交互兼容性（javascript）

事件兼容的問(wèn)題，我們通常需要會(huì)封裝一個(gè)適配器的方法，過(guò)濾事件句柄綁定、移除、冒泡阻止以及默認(rèn)事件行為處理

    var  helper = {}

    //綁定事件
    helper.on = function(target, type, handler) {
        if(target.addEventListener) {
            target.addEventListener(type, handler, false);
        } else {
            target.attachEvent("on" + type,
                function(event) {
                    return handler.call(target, event);
                }, false);
        }
    };

    //取消事件監(jiān)聽(tīng)
    helper.remove = function(target, type, handler) {
        if(target.removeEventListener) {
            target.removeEventListener(type, handler);
        } else {
            target.detachEvent("on" + type,
            function(event) {
                return handler.call(target, event);
            }, true);
        }
    };

new Date()構(gòu)造函數(shù)使用，"2018-07-05"是無(wú)法被各個(gè)瀏覽器中，使用new Date(str)來(lái)正確生成日期對(duì)象的。 正確的用法是"2018/07/05".

獲取 scrollTop 通過(guò) document.documentElement.scrollTop 兼容非chrome瀏覽器

var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;

瀏覽器 hack

快速判斷 IE 瀏覽器版本

判斷是否是 Safari 瀏覽器

/ Safari /
var isSafari = /a/.__proto__=="http://";

判斷是否是 Chrome 瀏覽器

/ Chrome /
var isChrome = Boolean(window.chrome);

身段不能掉，我們是個(gè)有逼格的前端

“什么？你們公司要兼容IE6，我們今天的面試就到這里為止吧，再見(jiàn)”。現(xiàn)在如果還有哪個(gè)公司要兼容IE6的話就不要去了，開發(fā)起來(lái)得多不幸福。

擴(kuò)展閱讀

如何處理CSS3屬性前綴_Autoprefixer

CSS透明opacity和IE各版本透明度濾鏡filter的最準(zhǔn)確用法

往期文章

精讀《你不知道的 javascript（上卷）》

精讀《你不知道的javascript》中卷

精讀《深入淺出Node.js》

javascript 垃圾回收算法

精讀《圖解HTTP》

思維導(dǎo)圖下載地址

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/116815.html

相關(guān)文章

  • 如何機(jī)制地回答瀏覽器兼容性問(wèn)題

    摘要：前言有過(guò)面試經(jīng)驗(yàn)的同學(xué)應(yīng)該都被問(wèn)過(guò)瀏覽器兼容性的問(wèn)題，對(duì)于面試官的問(wèn)題，常常猝不及防，因?yàn)橥ǔＫ麄兌际沁@么問(wèn)的。來(lái)談?wù)劄g覽器兼容的問(wèn)題吧，你對(duì)瀏覽器的兼容性有了解過(guò)嗎，那么如何才是我們正確回答這個(gè)問(wèn)題的姿勢(shì)呢。 前言 有過(guò)面試經(jīng)驗(yàn)的同學(xué)應(yīng)該都被問(wèn)過(guò)瀏覽器兼容性的問(wèn)題，對(duì)于面試官的問(wèn)題，常常猝不及防，因?yàn)橥ǔＫ麄兌际沁@么問(wèn)的。來(lái)談?wù)劄g覽器兼容的問(wèn)題吧，你對(duì)瀏覽器的兼容性有了解過(guò)嗎，那么如...

    leanote 評(píng)論0 收藏0

  • 拒信收割機(jī)の前端面經(jīng)（CVTE，唯品會(huì)，百度）

    摘要：另外回答的時(shí)候要淡定，一些問(wèn)題就算不懂也不能慌，要和面試官談笑風(fēng)生，然后盡量扯回到自己懂的東西上面大公司比如百度給我的感覺(jué)就是很重視基礎(chǔ)思維和潛力。 —— 雖然我的offer少，但是我的拒信多啊 這幾天終于閑下來(lái)，做一點(diǎn)微小的工作，整理了一些之前幾家公司的前端面試題和個(gè)人經(jīng)驗(yàn)，想做前端的師弟妹可以參考，也歡迎各同行大神來(lái)指教~ （以下問(wèn)題不分先后，時(shí)間久遠(yuǎn)難免有些遺漏；很多問(wèn)題面試官都...

    yzd 評(píng)論0 收藏0

  • 拒信收割機(jī)の前端面經(jīng)（CVTE，唯品會(huì)，百度）

    摘要：另外回答的時(shí)候要淡定，一些問(wèn)題就算不懂也不能慌，要和面試官談笑風(fēng)生，然后盡量扯回到自己懂的東西上面大公司比如百度給我的感覺(jué)就是很重視基礎(chǔ)思維和潛力。 —— 雖然我的offer少，但是我的拒信多啊 這幾天終于閑下來(lái)，做一點(diǎn)微小的工作，整理了一些之前幾家公司的前端面試題和個(gè)人經(jīng)驗(yàn)，想做前端的師弟妹可以參考，也歡迎各同行大神來(lái)指教~ （以下問(wèn)題不分先后，時(shí)間久遠(yuǎn)難免有些遺漏；很多問(wèn)題面試官都...

    channg 評(píng)論0 收藏0

  • 拒信收割機(jī)の前端面經(jīng)（CVTE，唯品會(huì)，百度）

    摘要：另外回答的時(shí)候要淡定，一些問(wèn)題就算不懂也不能慌，要和面試官談笑風(fēng)生，然后盡量扯回到自己懂的東西上面大公司比如百度給我的感覺(jué)就是很重視基礎(chǔ)思維和潛力。 —— 雖然我的offer少，但是我的拒信多啊 這幾天終于閑下來(lái)，做一點(diǎn)微小的工作，整理了一些之前幾家公司的前端面試題和個(gè)人經(jīng)驗(yàn)，想做前端的師弟妹可以參考，也歡迎各同行大神來(lái)指教~ （以下問(wèn)題不分先后，時(shí)間久遠(yuǎn)難免有些遺漏；很多問(wèn)題面試官都...

    BlackHole1 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<