太多了，但凡使用浏览器私有属性写的都不支持，举个例子来说：
-webkit-transform:translate3d(0,255,0);-moz-transform:translate3d(255,255,0);
-ms-transform:translate3d(0,255,255);
会在各种浏览器中，解析出不同的颜色
一个网页设计的再怎么好看，如果前端排出来的页面兼容性跟不上，那网页在不同浏览器下的表现也不尽相同，可能在IE浏览器下是正常的，但在谷歌浏览器下就错位了。这就是浏览器的兼容性，足以让前端工程师抓狂，因为在前端排版过程中要在不同浏览器下充分测试，相当麻烦。
什么是浏览器兼容性？为什么会存在浏览器兼容性？
我们知道，当下主流的浏览器的背后都是一个个科技类公司，不同公司之间也是存在竞争的，所以每个浏览器厂家都会对自家的浏览器定制化一些功能。也就是因为不同浏览器是由不同厂家开发的，不同版本的浏览器功能也存在差异，所以就衍生出了浏览器兼容性问题。
所谓的浏览器兼容性是指不同浏览器对网页的渲染模式存在差异，比如同样一段HTML和CSS代码，在不同浏览器上解析渲染出来的效果是不同的，比如说：A浏览器默认字体行高大一些，B浏览器默认字体行高小一些等。
常见的浏览器内核
虽然市面上的浏览器很多，但常见的浏览器内核主要有这几款：
1、Trident内核（IE内核）
IE浏览器使用的是Trident内核，像国内互联网公司推出的一些浏览器（360浏览器、百度浏览器、QQ浏览器、猎豹浏览器等）也使用了Trident内核（国内这些浏览器基本上都是双内核，即：IE内核+Webkit内核）。
2、Webkit内核
像Chrome（谷歌）浏览器、Safari（苹果）浏览器使用的是Webkit内核。
3、Gecko内核（火狐内核）
Firefox（火狐）浏览器使用的是Gecko内核，只不过火狐浏览器现在用得不多了。
浏览器兼容性怎么测试？
市面上的主流浏览器那么多，当我们排好一个页面后总不能下载10几个浏览器一一测试吧！其实现在的前端兼容性测试比以前的前端兼容性测试要轻松多了，因为：
现在我们只需要对常见的三四种内核的浏览器进行测试；
IE低版本不再考虑，以前要考虑IE6、IE7、IE8、IE9等不同版本的兼容性；
手机Wap端页面主要在Webkit内核浏览器下测试即可。
所以前端同学在测兼容性时，主要使用：IE10浏览器、Chrome浏览器进行测试即可。如果非要考虑低版本的IE兼容性，可使用IETester这类工具，另外在浏览器调试模式下可以直接指定IE内核。
今天小编要跟大家分享的文章是关于2020年入门web前端需要学习哪些知识正准备学习web前端的小伙伴们来和小编一起看一看吧，希望本篇文章能够对大家有所帮助。一、HTML、CSS基础、JavaScript语法基础。学完基础后，可以仿照电商网站(例如京东、小米)做首页的布局。
二、JavaScript语法进阶。包括：作用域和闭包、this和对象原型等。相信我，JS语法，永远是面试中最重要的部分。
三、jQuery、Ajax等。jQuery没有过时，它仍然是前端基础的一部分。
四、ES6语法。这部分属于JS新增的语法，面试必问。其中，关于promise、async等内容要尤其关注。
五、HTML5和CSS3。要熟悉其中的新特性。
六、canvas。面试时，有的公司不一定会问canvas，靠运气。如果时间不够，这部分的内容可以先不学。但如果你会，绝对属于加分项。
七、移动Web开发、Bootstrap等。要注意移动开发中的适配和兼容性问题。
八、前端框架：Vuejs和React。这两个框架至少要会一个。入门时，建议先学Vuejs，上手相对容易。但无论如何，同时掌握Vue和
React才是合格的前端同学。
九、Nodejs。属于加分项，如果时间不够，可以先不学，但至少要知道node环境的配置。
十、自动化工具：构建工具Webpack、构建工具gulp、CSS预处理器Sass等。注意，Sass比Less用得多，gulp比
grunt用得多。
十一、前端综合：>
工具/原料
电脑 QQ浏览器
方法/步骤
1、首先打开电脑，在电脑桌面上找到QQ浏览器图标双击。
2、进入界面后，点击屏幕右上方的三条横杆。
3、d出选项卡，点击“设置”。
4、进入新界面，点击屏幕上方的“高级”。
5、鼠标点击选择“智能内核模式”，即可解决浏览器的兼容性问题。
<head><meta
>1当使用transform:translate3d(-50%,-50%,0)居中d框（div）时，在pc端，内部的文字会模糊。
解决办法：给body定义样式
2用position:absolute/fixed;把一个按钮固定在页面的底部，在android系统中，当调用输入法时，该按钮会被顶起
3IOS系统调用第三方输入法时，系统无法监测到input的input、focus、change、blur事件
4不同浏览器默认margin，padding不同。
5不同浏览器的最小字体不同，有的是10px，有的是12px
6透明度opacity
7文字两端居中text-align：justify；text-align-last：just；在移动端不起作用
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）