web浏览器兼容性问题（大神知识点汇总）

逃离我推掉我的手 2021-08-28 18:06 635阅读 0赞

我们在开发的时候会明确项目要兼容哪些浏览器的最低版本，我之前的项目要求兼容IE8.0以上的版本，Chrome 48以上，FireFox 44以上。有了这些最基本的要求，在开发中就是要考虑到CSS样式和JavaScript的在这些浏览器的兼容性了

# html部分 #

### 1.H5新标签在IE9以下的浏览器识别 ###

html5shiv.js下载地址  
https://github.com/aFarkas/html5shiv/releases

### 2.ul标签内外边距问题ul标签在IE6\\IE7中，有个默认的外边距，但是在IE8以上及其他浏览器中有个默认的内边距。解决方法：统一设置ul的内外边距为0 ###

# CSS样式的兼容性 #

### 1.css的hack问题：主要针对IE的不同版本，不同的浏览器的写法不同 ###

IE的条件注释hack：

### 2.IE6双边距问题：IE6在浮动后，又有横向的margin，此时，该元素的外边距是其值的2倍 ###

解决办法：display:block;

### 3.IE6下图片的下方有空隙 ###

解决方法：给img设置display:block;

### 4.IE6下两个float之间会有个3px的bug ###

解决办法：给右边的元素也设置float:left;

### 5.IE6下没有min-width的概念，其默认的width就是min-width ###

### 6.IE6下在使用margin:0 auto;无法使其居中 ###

解决办法：为其父容器设置text-align:center;

### 7.被点击过后的超链接不再具有hover和active属性 ###

解决办法:按lvha的顺序书写css样式，  
“:link”: a标签还未被访问的状态；  
“:visited”: a标签已被访问过的状态；  
“:hover”: 鼠标悬停在a标签上的状态；  
“:active”: a标签被鼠标按着时的状态；

### 8.在使用绝对定位或者相对定位后，IE中设置z-index失效，原因是因为其元素依赖于父元素的z-index，但是父元素默认为0， 子高父低，所以不会改变显示的顺序 ###

### 9.IE6下无法设置1px的行高，原因是由其默认行高引起的 ###

解决办法：为期设置overflow:hidden;或者line-height:1px;

# JavaScript的兼容性 #

### 1.标准的事件绑定方法函数为addEventListener，但IE下是attachEvent； ###

### 2.事件的捕获方式不一致，标准浏览器是由外至内，而IE是由内到外，但是最后的结果是将IE的标准定为标准 ###

### 3.window.event获取的。并且获取目标元素的方法也不同，标准浏览器是event.target，而IE下是event.srcElement ###

### 4.在低版本的IE中获取的日期处理函数的值不是与1900的差值，但是在高版本的IE中和标准浏览器保持了一致，获取的值也是与1900的差值。 ###

比如：var year= new Date().getYear();

### 5.ajax的实现方式不同，这个我所理解的是获取XMLHttpRequest的不同，IE下是activeXObject ###

### 6.IE中不能操作tr的innerHtml ###

### 7.获得DOM节点的父节点、子节点的方式不同 ###

其他浏览器：parentNode parentNode.childNodes  
IE：parentElement parentElement.children  
————————————————  
版权声明：本文为CSDN博主「智学无忧-老曹」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。  
原文链接：https://blog.csdn.net/lxcao/article/details/52975459

众所周知，浏览器的兼容性问题是开发人员经常会遇到的问题，它是由于不同浏览器的不同对代码的解析不同，而产生的在页面上显示的效果不同。那么，现在我把从工作当中发遇到的有关兼容性问题及解决方案做个简单总结，供各位参考：

### 第一类：块状元素float后，有添加了横向的margin，在IE6下比设置的值要大（属于双倍浮动的bug） ###

解决方案：给float标签添加display：inline，将其转换为行内元素

### 第二类：表单元素行高不一致 ###

解决方案：给表单元素添加float：left（左浮动）；或者是vertical-align：middle；（垂直对齐方式：居中）

### 第三类：设置较小高度的容器（小于10px），在IE6下不识别小于10px的高度； ###

解决方案：给容器添加overflow：hidden；

### 第四类：当在a标签中嵌套img标签时，在某些浏览器中img会有蓝色边框； ###

解决方案：给img添加border：0；或者是border：none；

### 第五类：min-height在IE6下不兼容 ###

解决方案：

1）min-height：value；

_height：value；

2）min-height：value；

height：auto！important；
    
     height：value；

### 第六类：图片默认有间隙 ###

解决方案：

1）给img标签添加左浮动float：left；

2）给img标签添加display：block；

### 第七类：按钮默认大小不一 ###

解决方案：

1）用a标签来模拟按钮，添加样式；

2）如果按钮是一张背景图片，那么直接给按钮添加背景图；

### 第八类：百分比的bug ###

解决方案：父元素宽度为100%，子元素宽度各为50%，在IE6下各个元素宽度之和超过100%

解决方案：给右边浮动的子元素添加clear：right；

### 第九类：鼠标指针bug ###

描述：cursor：hand；只有ie浏览器识别，其他浏览器不识别

解决方案：cursor：pointer；IE6以上浏览器及其他内核浏览器都识别；

### 第十类：透明度属性 ###

解决方案：针对IE浏览器：filter：alpha（opacity=value）；（取值范围1–100）

兼容其他浏览器：opacity：value；（取值范围0–1）

### 第十一类：上下margin的重叠问题 ###

描述：给上边元素设置了margin-bottom，给下边元素设置了margin-top，浏览器只会识别较大值；

解决方案：margin-top和margin-bottom中选择一个，只设置其中一个值；

关于hack

我很少使用hacker的，可能是个人习惯吧，我不喜欢写的代码IE不兼容，然后用hack来解决。不过hacker还是非常好用的。使用hacker我可以把浏览器分为3类：IE6 ；IE7和遨游；其他（IE8 chrome ff safari opera等）

◆IE6认识的hacker 是下划线\_ 和星号 \*

◆IE7 遨游认识的hacker是星号 \*

比如这样一个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。因为优先级相同且想冲突的属性设置后一个会覆盖掉前一个，所以书写的次序是很重要的。  
————————————————  
版权声明：本文为CSDN博主「zytyxz」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。  
原文链接：https://blog.csdn.net/zytyxz/article/details/78492428

市场上浏览器种类很多，不同浏览器的内核也不尽相同，所以各个浏览器对网页的解析存在一定的差异。  
浏览器内核主要分为两种，一是渲染引擎，另一个是js 引擎，内核更加倾向于说渲染引擎。  
常见的浏览器内核：  
常见的浏览器内核可以分四种：Trident、Gecko、Blink、Webkit  
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; \}

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

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

解决方案：父级元素设置position:relative  
————————————————  
版权声明：本文为CSDN博主「wanmeiyinyue315」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。  
原文链接：https://blog.csdn.net/wanmeiyinyue315/article/details/79654984