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

所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎
所以浏览器兼容性问题一般指：css兼容、js兼容

常见的浏览器内核：

IE浏览器	Trident内核也称为IE内核
Chrome浏览器	Webkit内核，现在是Blink内核
Firefox浏览器	Gecko内核，俗称Firefox内核
Safari浏览器	Webkit内核
Opera浏览器	最初是自己的Presto内核，后来加入谷歌大军，从Webkit又到了Blink内核；
360浏览器	IE+Chrome双内核
猎豹浏览器	IE+Chrome双内核
百度浏览器	IE内核
QQ浏览器	Trident（兼容模式）+Webkit（高速模式）

常见的兼容性问题：

1、不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同

解决方案： css 里增加通配符 * { margin: 0; padding: 0; }

这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外补丁是0。

2、IE6双边距问题；在 IE6中设置了float , 同时又设置margin , 就会出现边距问题

解决方案：设置display:inline;

我们最常用的就是div+CSS布局了，而div就是一个典型的块属性标签，横向布局的时候我们通常都是用div float实现的，横向的间距设置如果用margin实现，这就是一个必然会碰到的兼容性问题。

3、当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度

解决方案：超出高度的标签设置overflow:hidden,或者设置line-height的值小于你的设置高度

这种情况一般出现在我们设置小圆角背景的标签里。出现这个问题的原因是IE8之前的浏览器都会给标签一个最小默认的行高的高度。即使你的标签是空的，这个标签的高度还是会达到默认的行高。

4、图片默认有间距

解决方案：使用float 为img 布局

因为img标签是行内属性标签，所以只要不超出容器宽度，img标签都会排在一行里，但是部分浏览器的img标签之间会有个间距。去掉这个间距使用float是正道。（我的一个学生使用负margin，虽然能解决，但负margin本身就是容易引起浏览器兼容问题的用法，所以我禁止他们使用）

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:pointer；

8、两个块级元素，父元素设置了overflow:auto；子元素设置了position:relative ;且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；

解决方案：父级元素设置position:relative；

常见前端浏览器兼容问题及解决方案相关推荐

常见的浏览器兼容问题及解决方案
1 浏览器内核不同浏览器的内核也不尽相同,所以各个浏览器对网页的解析存在一定的差异. 常见的浏览器内核: 浏览器名称内核 IE Trident内核,也称IE内核 Chrome(谷歌) 以前是Web ...
前端开发中常见的浏览器兼容性问题及解决方案
文章目录前言一.浏览器四大内核二.主流兼容问题 (一)浏览器引擎 (二)兼容问题的原因 (三) 为什么浏览器会存在兼容性问题? (四)处理兼容问题的思路 1. 要不要做? 2. 做到什么程度? ...
常见的浏览器兼容问题
来源于: http://developer.51cto.com/art/201008/218335.htm 浏览器兼容问题一:不同浏览器的标签默认的外边距和内边距不同问题症状:随便写几个标签,不加样 ...
WEB前端浏览器兼容问题处理
问题一:不同浏览器的标签默认的外补丁和内补丁不同问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大. 碰到频率:100% 解决方案:css里 *{margi ...
前端浏览器兼容知识点整理
做前端,总会涉及到浏览器兼容的问题,之所以存在浏览器兼容的问题,是因为各个浏览器的内核不同, 相对应的同一套代码,不同的浏览器解析后,所呈现的页面效果也会存在一定的差异.一浏览器内核差异先来了解一 ...
web前端——浏览器兼容问题
[1]为什么会出现浏览器兼容问题在各大浏览器厂商的发展过程中,它们对web的标准各有不同的实现,标准不同存在差异所以产生兼容性的问题. [2]浏览器内核以及代表作品 IE浏览器内核:Trident内 ...
CSS常见的浏览器兼容汇总
CSS常见的浏览器兼容汇总一.从浏览器内核的角度来看,浏览器兼容性问题可分为以下三类: 1.渲染相关:和样式相关的问题,即体现在布局效果上的问题. 2.脚本相关:和脚本相关的问题,包括JavaSc ...
前端常见的浏览器兼容问题
不同浏览器的内核不尽相同,所以各个浏览器对网页的解析存在一定的差异. 浏览器内核主要分为两种,一是渲染引擎,另一个是js 引擎所以浏览器兼容性问题一般指:css兼容.js兼容一.样式初始化由于各 ...
常见的浏览器兼容性问题与解决方案——CSS篇
1.不同的浏览器的标签默认的外补丁和内补丁不同问题症状:随便写几个标签,不加样式控制的情况下,各自的margin和padding差异较大. 碰到频率:100% 解决方案:初始化CSS的默认样式,*{ ...

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

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

常见的浏览器内核：

常见的兼容性问题：

1、不同浏览器的标签默认的外补丁( margin )和内补丁(padding)不同

2、IE6双边距问题；在 IE6中设置了float , 同时又设置margin , 就会出现边距问题

3、当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度

4、图片默认有间距

5、IE9一下浏览器不能使用opacity

6、边距重叠问题；当相邻两个元素都设置了margin 边距时，margin 将取最大值，舍弃最小值；

7、cursor:hand 显示手型在safari 上不支持

8、两个块级元素，父元素设置了overflow:auto；子元素设置了position:relative ;且高度大于父元素，在IE6、IE7会被隐藏而不是溢出；

常见前端浏览器兼容问题及解决方案相关推荐

最新文章

热门文章