浏览器兼容性前端（浏览器兼容性前端设置）

大家好，我是讯享网，很高兴认识大家。

 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg>

讯享网

概念

讯享网

常见内核

1、超链接访问过后hover样式就不出现的问题

问题说明：被点击访问过的超链接样式不再具有hover和active样式了,很多人应该都遇到过这个问题

解决方案：是改变CSS属性的排列顺序: L-V-H-A

讯享网

2、文字大小不一致

问题说明：字体大小在不同浏览上不一致，例如font-size:14px，在 IE 中的实际行高是16px，下面有3px留白；在 Firefox 中的实际行高是17px，下面有3px留白，上边1px留白；在 opera 中就更不一样了

3、IE10版本以上浏览器input标签后面自带一个X问题

问题说明： IE10，IE11浏览器当点击input text文本框时，输入文本后出现一个删除功能的X按钮
解决方案：给input添加如下CSS样式

IE浏览器效果

讯享网

谷歌浏览器效果

为了保持统一加上如下代码:

讯享网

4、IE8不支持canvas标签

问题说明：canvas在ie8以及低版本中都不被支持
解决方案：可以下载Google出的Excanvas.js库，它是利用IE支持的VML对象来模拟Canvas的绘图的，有些情况下可用，但无法穷尽Canvas的所有功能，在页面中引用Excanvas.js文件，最好在标签中

5、IE不支持html5标签

问题说明：使用html5标签能让代码语义化更直观，而且更方便SEO优化。但是此html5新标签在IE6/IE7/IE8上并不能识别，需要进行JavaScript处理

解决方案：借用前辈封装好的js库— html5shiv.js

css hack

讯享网

1.css hack方式 ——条件注释法

2.css hack方式 ——选择器前缀法

讯享网

1、IE不支持css3新属性

问题说明：css3.0增加的新属性，如投影、渐变、旋转、圆角等等~ 这些新标准属性在ie6、ie7、ie8浏览器版本里得不到很好的支持

解决方案：在属性前加浏览器前缀兼容早期浏览器

2、不同浏览器的标签默认的margin和padding不同

解决方案：css 里增加通配符样式

讯享网

3、IE6边距问题

问题说明：块元素标签设置float 后，又设置了 margin 的情况下，在IE6中显示 margin 比设置的值大，常见症状是IE6中后面的一块被顶到下一行

解决方案：在 float 的标签样式中加入 display:inline; 将其转化为行内属性备

4、图片默认有间距

问题说明：几个 img 标签放在一起的时候，有些浏览器会有默认的间距

解决方案：使用 float 属性为 img 布局（所有图片左浮）

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

6、最低高度 min-height 不兼容

问题说明：因为 min-height 本身就是一个不兼容的 CSS 属性，所以设置 min-height 时不能很好的被各个浏览器兼容

解决方案：如果我们要设置一个标签的最小高度 200px ，设置如下

讯享网

7、text-align居中问题

问题说明： 首先在父级元素定义 text-align: center; 这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。

解决方案：在子元素定义时候设定时再加上 margin-right: auto; margin-left: auto;

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

解决方案：统一使用 cursor:pointer

9、IE8以下不支持CSS3的background-size属性

解决方案：使用滤镜filter

10、IE浏览器div最小宽度和最小高度不生效的问题

问题说明：IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。比如要设置背景图片，这个最小宽度是比较重要的。

解决方案：要解决这个问题，可以这样设置

11、IE8不支持CSS媒体查询

问题说明：IE8不支持CSS媒体查询，对响应式设计大大不利。Respond.js可帮助IE6-8兼容 “min/max-width” 媒体查询条件

解决方案：在页面中所有css文件的引用位置之后引用Respond.js。而且Respond.js的引用得越早，用户看到页面闪烁的机会越小

讯享网

1、事件绑定

其他浏览器：

IE7、IE8：

讯享网

解决方案：

2、获取event事件对象

讯享网

3、获取event事件源对象

4.阻止事件冒泡传播

讯享网

5. 阻止事件默认行为

6.获取滚动距离：滚动条

讯享网

7、访问父节点

其他浏览器：使用obj.parentNode 访问 obj 的父结点

IE浏览器：使用 obj.parentElement 或 obj.parentNode 访问 obj 的父结点

讯享网

解决方案：统一使用obj.parentNode 来访问 obj 的父结点

8、innerText 的问题

问题说明：innerText 在IE中能正常工作，但是 innerText 在FireFox中却不行

解决方案：在非IE浏览器中使用 textContent 代替 innerText

讯享网

9丶其他兼容

f(“Explorer”) > -1){
document.getElementById(“element”).innerText = “text”; // IE
} else {
document.getElementById(“element”).textContent = “text”; // 其他
}

讯享网