前端常用瀏覽器

A. 我是學前端開發的，想問下做前端需要兼容哪些瀏覽器及瀏覽器的版本

目前國內主流瀏覽器：IE、搜狗、360 （可以網路 國內瀏覽器排行 ）
IE要兼容到IE6、7、8，主要是IE6的問題
搜狗和360差不多，主要是那個 極速 模式

B. web前端開發用什麼軟體

對於前端，官方的定義是網站前台部分，運行在PC端，移動端等瀏覽器上展現給用戶瀏覽的網頁。用自己的話來說，前端是網頁給訪問網站的人看的內容和頁面，那前端開發顧名思義就是這些內容和頁面中代碼的實現。

現在的前端開發使得現代網頁更加美觀，交互效果顯著，功能更加強大。所以現在的前端開發，運用到的知識面更加廣泛，難度也更大。前端開發目前市場需求還是很大的，而且相對來講比較容易，很適合學習。需要學習的內容也不少，我有全套web前端視頻課資料可以發給你自學。

學習內容包括：

①計算機基礎以及PS基礎

②前端開發基礎（HTML5開發、JavaScript基礎到高級、jQuery網頁特效、Bootstrap框架）

③移動開發

④前端高級開發（ECMAScript6、Veu.js框架開發、webpack、前端頁面優化、React框架開發、AngularJS 2.0框架開發等）

⑤小程序開發

⑥全棧開發（MySQL資料庫、Python編程語言、Django框架等）

⑦就業拓展（網站SEO與前端安全技術）

互聯網行業目前還是最熱門的行業之一，學習IT技能之後足夠優秀是有機會進入騰訊、阿里、網易等互聯網大廠高薪就業的，發展前景非常好，普通人也可以學習。

想要系統學習，你可以考察對比一下開設有相關專業的熱門學校，好的學校擁有根據當下企業需求自主研發課程的能力，能夠在校期間取得大專或本科學歷，中博軟體學院、南京課工場、南京北大青鳥等開設相關專業的學校都是不錯的，建議實地考察對比一下。

祝你學有所成，望採納。

C. Web前端中常見的瀏覽器兼容問題有哪些

使用Trident內核的瀏覽器：IE、Maxthon、TT； 使用Gecko內核的瀏覽器：Netcape6及以上版本、FireFox； 使用Presto內核的瀏覽器：Opera7及以上版本； 使用Webkit內核的瀏覽器：Safari、Chrome。
而我現在所說的兼容性問題，主要是說IE與幾個主流瀏覽器如firefox，google等。而對IE瀏覽器來說，IE7又是個跨度，因為之前的版本更新甚慢，bug甚多。從IE8開始，IE瀏覽器漸漸遵循標准，到IE9後由於大家都一致認為標准很重要，可以說在兼容性上比較好了，但是在中國來說，由於xp的佔有率問題，使用IE7以下的用戶仍然很多，所以我們不得不考慮低版本瀏覽器的兼容。

對瀏覽器兼容問題，一般分，HTML，Javascript兼容，CSS兼容。 其中html相關問題比較容易處理，無非是高版本瀏覽器用了低版本瀏覽器無法識別的元素，導致其不能解析，所以平時注意一點就是。特別是HTML5增加了許多新標簽，低版本瀏覽器有點影響時代進步啊

問題一：不同瀏覽器的標簽默認的外補丁和內補丁不同

• 問題症狀：隨便寫幾個標簽，不加樣式控制的情況下，各自的margin 和padding差異較大。

• 碰到頻率:100%

• 解決方案：css里*{margin:0;padding:0;}

• 備註：這個是最常見的也是最易解決的一個瀏覽器兼容性問題，幾乎所有的css文件開頭都會用通配符*來設置各個標簽的內外補丁是0。

問題二：塊屬性標簽float後，又有橫行的margin情況下，在ie6顯示margin比設置的大

• 問題症狀:常見症狀是ie6中後面的一塊被頂到下一行

• 碰到頻率：90%（稍微復雜點的頁面都會碰到，float布局最常見的瀏覽器兼容問題）

• 解決方案：在float的標簽樣式控制中加入 display:inline;將其轉化為行內屬性

• 備註：我們最常用的就是div+css布局了，而div就是一個典型的塊屬性標簽，橫向布局的時候我們通常都是用div float實現的，橫向的間距設置如果用margin實現，這就是一個必然會碰到的兼容性問題。

問題三：設置較小高度標簽（一般小於10px），在ie6，ie7，遨遊中高度超出自己設置高度

• 問題症狀：ie6、7和遨遊里這個標簽的高度不受控制，超出自己設置的高度

• 碰到頻率：60%

• 解決方案：給超出高度的標簽設置overflow:hidden;或者設置行高line-height 小於你設置的高度。

• 備註：這種情況一般出現在我們設置小圓角背景的標簽里。出現這個問題的原因是ie8之前的瀏覽器都會給標簽一個最小默認的行高的高度。即使你的標簽是空的，這個標簽的高度還是會達到默認的行高。

問題四：行內屬性標簽，設置display:block後採用float布局，又有橫行的margin的情況，ie6間距bug（類似第二種）

• 問題症狀：ie6里的間距比超過設置的間距

• 碰到幾率：20%

• 解決方案：在display:block;後面加入display:inline;display:table;

• 備註：行內屬性標簽，為了設置寬高，我們需要設置display:block;(除了input標簽比較特殊)。在用float布局並有橫向的margin後，在ie6下，他就具有了塊屬性float後的橫向margin的bug。不過因為它本身就是行內屬性標簽，所以我們再加上display:inline的話，它的高寬就不可設了。這時候我們還需要在display:inline後面加入display:talbe。

問題五：圖片默認有間距

• 問題症狀：幾個img標簽放在一起的時候，有些瀏覽器會有默認的間距，加上問題一中提到的通配符也不起作用。

• 碰到幾率：20%

• 解決方案：使用float屬性為img布局

• 備註：因為img標簽是行內屬性標簽，所以只要不超出容器寬度，img標簽都會排在一行里，但是部分瀏覽器的img標簽之間會有個間距。去掉這個間距使用float是正道

問題六：標簽最低高度設置min-height不兼容

• 問題症狀：因為min-height本身就是一個不兼容的css屬性，所以設置min-height時不能很好的被各個瀏覽器兼容

• 碰到幾率：5%

• 解決方案：如果我們要設置一個標簽的最小高度200px，需要進行的設置為：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

• 備註：在B/S系統前端開時，有很多情況下我們有這種需求。當內容小於一個值（如300px）時。容器的高度為300px；當內容高度大於這個值時，容器高度被撐高，而不是出現滾動條。這時候我們就會面臨這個兼容性問題。

問題七：透明度的兼容css設置

• 方法是：每寫一小段代碼（布局中的一行或者一塊）我們都要在不同的瀏覽器中看是否兼容，當然熟練到一定的程度就沒這么麻煩了。建議經常會碰到兼容性問題的新手使用。很多兼容性問題都是因為瀏覽器對標簽的默認屬性解析不同造成的，只要我們稍加設置都能輕松地解決這些兼容問題。如果我們熟悉標簽的默認屬性的話，就能很好的理解為什麼會出現兼容問題以及怎麼去解決這些兼容問題。1



技巧一：css hack

使用hacker 我可以把瀏覽器分為3類：ie6 ；ie7和遨遊；其他（ie8 chrome ff safari opera等）

• ie6認識的hacker 是下劃線_ 和星號 *

• ie7 遨遊認識的hacker是星號 * （包括上面問題6中的 !important也算是hack的一種。不過實用性較小。）

• 比如這樣一個css設置 height:300px;*height:200px;_height:100px;ie6瀏覽器在讀到 height:300px的時候會認為高時300px；繼續往下讀，他也認識*heihgt， 所以當ie6讀到*height:200px的時候會覆蓋掉前一條的相沖突設置，認為高度是200px。繼續往下讀，ie6還認識_height,所以他又會覆蓋掉200px高的設置，把高度設置為100px；


• ie7和遨遊也是一樣的從高度300px的設置往下讀。當它們讀到*height200px的時候就停下了，因為它們不認識_height。所以它們會把高度解析為200px；


• 剩下的瀏覽器只認識第一個height:300px;所以他們會把高度解析為300px。1234



因為優先順序相同且相沖突的屬性設置後一個會覆蓋掉前一個，所以書寫的次序是很重要的。

• /* CSS屬性級Hack */ color:red; /* 所有瀏覽器可識別*/_color:red; /* 僅IE6 識別 */*color:red; /* IE6、IE7 識別 */+color:red; /* IE6、IE7 識別 */*+color:red; /* IE6、IE7 識別 */[color:red; /* IE6、IE7 識別 */ color:red9; /* IE6、IE7、IE8、IE9 識別 */color:red; /* IE8、IE9 識別*/color:red9; /* 僅IE9識別 */color:red ; /* 僅IE9識別 */color:red!important; /* IE6 不識別!important 有危險*//* CSS選擇符級Hack */ *html #demo { color:red;} /* 僅IE6 識別 */*+html #demo { color:red;} /* 僅IE7 識別 */body:nth-of-type(1) #demo { color:red;} /* IE9+、FF3.5+、Chrome、Safari、Opera 可以識別


• */ head:first-child+body #demo { color:red; } /* IE7+、FF、Chrome、Safari、Opera 可以識別 */:root #demo { color:red9; } : /* 僅IE9識別 */



越少的浮動，就會越少的代碼，會有更靈活的頁面，會有擴展性更強的頁面。這不多說，歸結為到一定水平了，浮動會用的較少。另外，您也會避免使用浮動+margin的用法。所以，越後來越不易遇到這種bug。

技巧二：padding，marign，height，width

注意是技巧，不是方法： 寫好標准頭http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd」>http://www.w3.org/1999/xhtml」>盡量用padding，慎用margin，height盡量補上100%，父級height有定值子級height不用100%，子級全為浮動時底部補個空clear:both的div寬盡量用margin，慎用padding，width算準實際要的減去padding

技巧三：顯示類（display:block,inline）

• display:block,inline兩個元素



• display:block; //可以為內嵌元素模擬為塊元素display:inline; //實現同一行排列的的效果display:table; //for FF,模擬table的效果1234567



display:block塊元素，元素的特點是： 總是在新行上開始；高度，行高以及頂和底邊距都可控制；寬度預設是它的容器的100%，除非設定一個寬度

display:inline就是將元素顯示為行內元素，元素的特點是：和其他元素都在一行上；高，行高及頂和底邊距不可改變；寬度就是它的文字或圖片的寬度，不可改變。span，a，label，input，img，strong和em是 inline 元素的例子

技巧四：怎樣使一個div層居中於瀏覽器中？

1）

• <style type="text/css"><!-- div {position:absolute;top:50%;left:50%;margin:-100px 0 0 -100px;width:200px;height:200px;border:1px solid red; } --></style>12345678910111213141516171819



2）div里的內容，IE默認為居中，而FF默認為左對齊，可以嘗試增加代碼margin: 0 auto;

技巧五：float的div閉合;清除浮動;自適應高度

① 例如：＜div id="floatA">＜div id="floatB">＜div id="NOTfloatC">

• 這里的NOTfloatC並不希望繼續平移，而是希望往下排。(其中floatA、floatB的屬性已經設置為float:left;)

• 這段代碼在IE中毫無問題，問題出在FF。原因是NOTfloatC並非float標簽，必須將float標簽閉合。在＜divclass="floatB">＜div class="NOTfloatC">之間加上＜div class="clear">這個div一定要注意位置，而且必須與兩個具有float屬性的div同級，之間不能存在嵌套關系，否則會產生異常。並且將clear這種樣式定義為為如下即可：.clear{clear:both;}

②作為外部 wrapper 的 div 不要定死高度,為了讓高度能自適應，要在wrapper裡面加上overflow:hidden; 當包含float的box的時候，高度自適應在IE下無效，這時候應該觸發IE的layout私有屬性(萬惡的IE啊！)用zoom:1;可以做到，這樣就達到了兼容。
例如某一個wrapper如下定義：

• .colwrapper{overflow:hidden; zoom:1; margin:5px auto;}1



③對於排版,我們用得最多的css描述可能就是float:left.有的時候我們需要在n欄的float div後面做一個統一的背景,譬如:

• <div id=」page」>



• <div id=」left」>＜/div>


• <div id=」center」>＜/div>


• <div id=」right」>＜/div>



• </div>1234567



比如我們要將page的背景設置成藍色,以達到所有三欄的背景顏色是藍色的目的,但是我們會發現隨著left centerright的向下拉長,而page居然保存高度不變,問題來了,原因在於page不是float屬性,而我們的page由於要居中,不能設置成float,所以我們應該這樣解決：

• <div id=」page」>



• <div id=」bg」 style=」float:left;width:100%」>



• <div id=」left」>＜/div>


• <div id=」center」>＜/div>


• <div id=」right」>＜/div>



• </div>



• </div>1234567891011



再嵌入一個float left而寬度是100%的DIV解決之。

④萬能float 閉合(非常重要!)

關於 clear float 的原理可參見 [How To ClearFloats Without Structural Markup],將以下代碼加入Global CSS 中,給需要閉合的div加上class=」clearfix」即可,屢試不爽。

• /* Clear Fix */ .clearfix:after { content:"."; display:block; height:0; clear:both;visibility:hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac */ .clearfix {display:block;} /* End hide from IE Mac */ /* end of clearfix */1234567



或者這樣設置：.hackbox{display:table; //將對象作為塊元素級的表格顯示}

技巧六：div嵌套時 y軸上 padding和 marign的問題

• FF里 y 軸上 子div 到 父div 的距離為 父padding + 子marign

• IE里 y 軸上 子div 到 父div 的距離為 父padding 和 子marign 里大的一個

• FF里 y 軸上 父padding=0 且 border=0 時，子div 到 父div 的距離為0，子marign 作用到 父div 外面

D. web前端問題，常用瀏覽器的內核都是什麼謝謝

IE 8 7 6 都有
FIREFOX
CHROME， 以及 某些雙核瀏覽器里的高速版核心 （如 搜狗，QQ瀏覽器，世界之窗極速版）
OPERA
SAFARY

大概 就這些吧

E. web前端開發工具哪個瀏覽器比較好

我一般用谷歌的，雖然都說firebug但是我還是覺得谷歌的看起來舒服，操作也比較流暢，因為我用
火狐
的會有發澀的感覺，另外如果要調試ie兼容，推薦
ie10
以上版本，或者edga的，因為這樣的ie瀏覽器可以模擬其他低級的
ie6
7
9瀏覽器模式，

F. 前端入職需要安裝什麼環境

一、基礎環境

Node.js是JavaScript運行時，目前前端工程化必不可缺的一個環境。通常我們會選擇穩定版本(LTS)進行下載。

NPM是javascript的包管理工具，也是目前Node.js默認的包管理工具。一般下載了Node.js後會附帶npm，不用專門的去下載。

YARN是Fackbook開源的依賴管理包，和npm是做同樣的工作，但相比npm安裝依賴的速度會更加迅速。兩者都是講依賴寫入package.json中，在使用習慣上是相近的。

Git是最先進的代碼版本控制軟體。

二、開發環境

編輯器

目前前端開發主流的編輯器有sublimeText、WebStorm、vscode，三種主流器各有特點:

• sublimeText是一個十分輕巧的編輯器，編輯器是付費軟體，可以無限試用。在 macOS 上下載該軟體僅需 15.2MB. 需要安裝相應的插件，比如你可能需要某個語言的語法高亮，因此你需要在 store 上找到相應插件來提高你開發體驗。

• webStorm是一個功能強大的編輯器，同時也是一個付費軟體，並不像sublimeText那樣可以無限試用，由於功能太過於齊全，一些低配置的電腦可能會吃不消。以上特點是群友對webStorm的評價，筆者沒有使用該編輯器，不過多評論。

• vsocde是由微軟開源的一個編輯器，雖然是後起之秀，但開源後該編輯器的設計與體驗迅速吸引了一大批用戶。它內置了一些前端基礎的開發環境，針對Node.js還可以進行短點調試。

vscode其中有一個插件叫做setiings sync, 它可以將你的編輯器配置上傳至gist。就算你換了一個全新的設備，下載vscode後，再下載該插件，傳入Token後就可以同步你所有的配置，十分的方便~

vscode的配置可以查看具體教程

瀏覽器

前端的工作更多時候是與用戶打交道，我們的工作產出通常在瀏覽器頁面上呈現。

瀏覽器通常提供了開發者工具以供開發者調試，目前市面上主流的瀏覽器主要就是chrome、Safari、IE/Edge、opera、firefox這五種瀏覽器。國內市場有UC瀏覽器等，但內核的大多都是採用webkit或者兼容低版本IE內核。

從statcounter 統計數據來看，目前主要的趨勢還是以chrome所使用的webkit內核作為主流，同時chrome的開發者工具對於開發人員十分的友好，因此有很多的開發者選擇了該瀏覽器作為首選的調試工具。chrome還有一個便利就是登陸了谷歌賬號後，可以在別的機器上進行同步插件和配置。

G. 前端面試常見問題——Web篇

1、IE瀏覽器內核:Trident內核，也是俗稱的IE內核;
2、Chrome瀏覽器內核:統稱為Chromium內核或Chrome內核，以前是Webkit內核，現在是Blink內核;
3、Firefox瀏覽器內核:Gecko內核，俗稱Firefox內核;
4、Safari瀏覽器內核:Webkit內核;
5、Opera瀏覽器內核:最初是自己的Presto內核，後來是Webkit，現在是Blink內核;
6、360瀏覽器、獵豹瀏覽器內核:IE+Chrome雙內核;
7、搜狗、遨遊、QQ瀏覽器內核: Trident(兼容模式)+Webkit(高速模式)﹔
8、網路瀏覽器、世界之窗內核:IE內核;
9、2345瀏覽器內核:以前是IE內核，現在也是IE+Chrome雙內核;

把不同路由對應的不同內容掌握在前端，如vue中的vue-router、react的ReactRouter等。出現在單頁面應用中，頁面中公共部分不變，只改變部分內容的使用。路由切換時根據不同的路由動態載入不同的組件，不刷新頁面。
優點 ：實現前後端的分離，緩解伺服器壓力，不需要每次從伺服器獲取，快速展現給用戶，用戶體驗更好。

見於多頁面應用中。每次都向後台伺服器發出請求，伺服器響應請求，在後台拼接html文件傳給前端顯示, 返回不同的頁面,瀏覽器會刷新頁面。

H. 現在前端一般用什麼軟體

1、Adobe Dreamweaver CS6
Dreamweaver CS6是世界頂級軟體廠商Adobe推出的一套擁有可視化編輯界面，用於製作並編輯網站和移動應用程序的網頁設計軟體。由於Dreamweaver支持代碼、拆分、設計、實時視圖等多種方式來創作、編寫和修改網頁，對於初級人員，你可以無需編寫任何代碼就能快速創建Web頁面。其成熟的代碼編輯工具更適用於Web開發高級人員的創作！
2、Adobe Edge
Adobe Edge是一個用HTML5、CSS、Java開發動態互動內容的設計工具。它的一個重要功能是web工具包界面，用於方便確保在不同瀏覽器中架構的一致性，此外，Adobe Edge還將整合TypeKit這樣的字體服務。通過Edge設計的內容可以兼容iOS和Android設備，也可以運行在火狐、Chrome、Safari和IE9等主流瀏覽器上。
3、DevExtreme
DevExtreme Complete Subion是性能最優的HTML5,CSS和Java移動開發框架，可以直接在Visual Studio集成開發環境，構建iOS，Android，Tizen和Windows Phone 8應用程序。DevExtreme包含 PhoneJS 和 ChartJS 兩個原生UI組件，並且提供源代碼。目前，DevExtreme支持VS2010/2012/2013集成開發環境，兼容Android 4+、iOS5+、Windows 8、Window Phone 8、Tizen五大移動平台，是Visual Studio開發人員開發跨平台移動產品的首選工具。
4、JetBrains WebStorm
WebStorm 是jetbrains公司旗下一款JS開發工具。被廣大中國JS開發者譽為「Web前端開發神器」、「最強大的HTML5編輯器」、「最智能的JavaS IDE」等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強大的JS部分的功能。
5、Sencha Architect
在開發移動和桌面應用的工具中，Sencha的定位是HTML5可視化應用開發。開發團隊可以在一個單一集成的環境中完成應用的設計、開發和部署。開發者還可以開發Sencha Touch2和Ext JS4 Java應用，並實時預覽。
6、Initializr
Initializr 是製作 HTML5 網站最好的入門輔助開發工具，你可以使用提供的特色模板快速生成網站，也可以自定義，Initializr 會為你生成代碼簡潔的可定製的網頁模板。
7、HTML5demos
想知道你的瀏覽器是否支持 HTML5 Canvas 嗎？想知道 Safari 是否可以運行簡單的 HTML5 聊天客戶端嗎？HTML5demos 會告訴你每一個HTML5特性在哪些瀏覽器中支持。

8、HTML5 Tracker
想了解 HTML5的最新動向嗎? 使用 HTML5 Tracker 吧，它可以跟蹤 HTML5 最新修訂信息。
9、HTML5 visual cheat sheet
想要快速超找一個標簽或者屬性嗎？看看這個非常酷的速查手冊吧，每個Web開發人員的必備。
10、Switch To HTML5
Switch To HTML5 是一個基礎而實用的模板生成工具。如果你開始一個新項目，可以到這里獲取免費的 HTML5 網站模板。
11、HTML5 Test
你瀏覽器准備好迎接 HTML5 革命了嗎？HTML5 Test 將告訴你。這個網站會為你當前使用的瀏覽器生成一份對video、audio、canvas等等特性的支持情況的完整報告。
12、Lime JS
LimeJS 是一個 HTML5 游戲開發框架，用於快速構建運行於觸屏設備和桌面瀏覽器的游戲。非常棒的HTML5開發工具，一定要用用試試。
以上就是向大家推薦12款優秀的HTML5開發工具。希望能幫到大家。