前端常用浏览器

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开发工具。希望能帮到大家。