前端浏览器兼容知识点整理

做前端，总会涉及到浏览器兼容的问题，之所以存在浏览器兼容的问题，是因为各个浏览器的内核不同，
相对应的同一套代码，不同的浏览器解析后，所呈现的页面效果也会存在一定的差异。一 浏览器内核差异
先来了解一下各个浏览器的内核（渲染引擎）：Trident(IE内核)：
IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）Gecko(Firefox内核)：
Mozilla FirefoxWebkit(Safari内核,Chrome内核原型,开源)：二 兼容问题处理细则
1、浏览器默认会有一些自己独有的属性，像内外边距啦，图片边框啊、input自带的样式啊等等，比如
清除补丁和边距：*{margin:0;padding:0;}，像这样使用通配符强制将补丁和边距置为零，简单粗暴，
但是这样处理比较消耗性能，我一般倾向于使用一些CSS样式重置库，Neat.css：解决Bug，特别是低级浏览器的常见Bug；统一效果，但不盲目追求重置为0；向后兼容；
考虑响应式；考虑移动设备。Reset.css：对浏览器样式的重置（杀伤力偏大）Normalize.css：修复浏览器样式除了这些，大家还可以借鉴百度、淘宝的样式重置表。2、块级元素浮动后，又使用margin来控制相邻块级元素的间距的情况下，在IE6下，margin值要比我们
设置的值大，这样，后面浮动的元素就会被挤到下面去，解决方案是：将浮动的块级元素的display属性值
设为inline-block。3、设置标签的高度小于10px的时候，在IE6，IE7，遨游中标签的高度会超出自己设置高度。解决方案：
给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。3、设置标签的高度小于10px的时候，在IE6，IE7，遨游中标签的高度会超出自己设置高度。解决方案：
给超出高度的标签设置overflow:hidden;或者设置行高line-height 小于你设置的高度。4、行内属性标签，设置display:block后采用float布局，又有横行的margin的情况，ie6间距bug。
解决方案：在display:block;后面加入display:inline;display:table;。5、几个img标签放在一起的时候，有些浏览器会有默认的间距。解决方案：使用float属性为img布局。6、min-height设置标签最小高度的时候不兼容。解决方案：如果我们要设置一个标签的最小高度200px，
需要进行的设置为：{min-height:200px; height:auto
!important; height:200px; overflow:visible;}条件注释法：<!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--><!--[if IE]> 所有的IE可识别 <![endif]--><!--[if IE 6]> 仅IE6可识别 <![endif]--><!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]--><!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]--><!--[if IE 7]> 仅IE7可识别 <![endif]--><!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]--><!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]--><!--[if IE 8]> 仅IE8可识别 <![endif]--><!--[if IE 9]> 仅IE9可识别 <![endif]-->.csshack {width: 100px;height: 100px;background-color: green;/* 全部识别 */.background-color: #ccc\9;/*IE6、7、8识别*/+background-color: #fff;/*IE6、7识别*/_background-color:#1e0bd1;/*IE6识别*/
}
.csshack, x:-moz-any-link, x:default{background-color:#00ff00;}/*IE7 firefox3.5及以下 识别 */
@-moz-document url-prefix(){.csshack{background-color:#00ff00;}}/* 仅firefox 识别 */
* +html .csshack{background-color:#a200ff;}/* 仅IE7 识别 */
@media screen and (-webkit-min-device-pixel-ratio:0){.csshack{background-color:#f1ee18}}{}/*safari(Chrome) 有效 */
@media all and (min-width: 0px){ .csshack{background-color:#f1ee18;
/*opera and Safari(Chrome) and firefox*/ background-color:#4cac70\0;/* 仅 Opera 有效 */ }}

前端常见的浏览器兼容性问题及解决方案

不同浏览器的内核也不尽相同，所以各个浏览器对网页的解析存在一定的差异。浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎，内核更加倾向于说渲染引擎。常见的浏览器内核可以分四种：Trident、Gecko、Blink、Webkit
1.IE浏览器 Trident内核，也成为IE内核
2.Chrome浏览器 Webkit内核，现在是Blink内核
3.Firefox浏览器 Gecko内核，俗称Firefox内核
4.Safari浏览器 Webkit内核
5.Opera浏览器 最初是自己的Presto内核，后来加入谷歌大军，从Webkit又到了Blink内核；
6.360浏览器 IE+Chrome双内核
7.猎豹浏览器 IE+Chrome双内核
8.百度浏览器 IE内核
9.QQ浏览器 Trident（兼容模式）+Webkit（高速模式）常见的兼容性问题：1、不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同
解决方案： css 里增加通配符 * { margin: 0; padding: 0; }2、IE6双边距问题；在 IE6中设置了float , 同时又设置margin , 就会出现边距问题
解决方案：设置display:inline;3、当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度
解决方案：超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度4、图片默认有间距
解决方案：使用float 为img 布局5、IE9一下浏览器不能使用opacity
解决方案：
opacity: 0.5;filter:
alpha(opacity = 50);filter: progid:DXImageTransform.Microsoft.Alpha
(style = 0, opacity = 50);6、边距重叠问题；当相邻两个元素都设置了margin 边距时，margin 将取最大值，舍弃最小值；
解决方案：为了不让边重叠，可以给子元素增加一个父级元素，并设置父级元素为overflow:hidden；7、cursor:hand 显示手型在safari 上不支持
解决方案：统一使用 cursor:pointer8、两个块级元素，父元素设置了overflow:auto；子元素设置了position:relative ;
且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；
解决方案：父级元素设置position:relative

前端浏览器兼容知识点整理相关推荐

关于CSS浏览器兼容问题整理(IE6.0、IE7.0 与 FireFox)
最全的CSS浏览器兼容问题整理(IE6.0.IE7.0 与 FireFox) CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireo ...
常见前端浏览器兼容问题及解决方案
常见前端浏览器兼容问题及解决方案所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站 ...
div+CSS浏览器兼容问题整理(IE6.0、IE7.0 ,ie8 , FireFox...)
CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不 ...
div+CSS浏览器兼容问题整理(IE6.0、IE7.0 ,ie8 , FireFox)
1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行 ...
div+CSS浏览器兼容问题整理(IE6.0、IE7.0 ,ie8 , FireFox..
CSS技巧 1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不 ...
WEB前端浏览器兼容问题处理
问题一:不同浏览器的标签默认的外补丁和内补丁不同问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大. 碰到频率:100% 解决方案:css里 *{margi ...
web前端——浏览器兼容问题
[1]为什么会出现浏览器兼容问题在各大浏览器厂商的发展过程中,它们对web的标准各有不同的实现,标准不同存在差异所以产生兼容性的问题. [2]浏览器内核以及代表作品 IE浏览器内核:Trident内 ...
前端浏览器兼容问题总结
浏览器占比现状在各大浏览器厂商的发展过程中,他们其实对web的标准都有不同的实现,因为实现的标准的不同,所以会有兼容性的产生,早期IE是在浏览器的世界中,占据主导地位.所以它自身实现了很多不同于标准 ...
最全的CSS浏览器兼容问题整理
从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTY ...

前端浏览器兼容知识点整理

前端浏览器兼容知识点整理相关推荐

最新文章

热门文章