html属性值无效原因_解决浏览器兼容性的五大方案

浏览器兼容性涉及到很多内容，尤其是IE浏览器。以下是五种常见的浏览器兼容性解决方案。

1. 样式初始化

由于各大浏览器都有自己的默认样式，而且都不相同，为了尽可能保证样式的统一，前端在开发项目之前会先对样式进行格式化。最常见的分为以下几个方面。

1、value和value都设置为0

将html、body、a、li、ol、input、、、等标签的值和值设置为0。

2.html标签

设置统一字体。如果使用rem单位，html需要设置合适的字体大小。

3.a标签

要设置统一颜色，请将 text- 属性设置为 none。

4.ol和li标签

list-style统一设置为none。

5.Input、、、等标签初始化

设置为无；

根据需要设置颜色和背景颜色。

2.使用不同类型的浏览器内核前缀

1.（ ）和（）内核：（无中文翻译）前缀：--

2.IE（IE浏览器）内核：（汉译）前缀：-ms-

3.（火狐浏览器）内核：Gecko（中文译作Gecko）前缀：-moz-

4.Opera（Opera浏览器）内核：（快速中文翻译）前缀：-o-

例子：

-webkit-border-radius: 10px; /*谷歌浏览器*/
-ms-border-radius: 10px;     /*IE浏览器*/
-moz-border-radius: 10px;    /*火狐浏览器*/
-o-border-radius: 10px;      /*欧朋浏览器*/
border-radius: 10px; 

3、不同版本IE浏览器的解决办法

1.对于低版本的IE浏览器，使用CSS hack（即给出功能前缀）

注意：以下符号写在属性名称前面。

与 IE6 兼容的 Hack 符号：- 或 _

兼容 IE6 和 7 的 Hack 符号：` ~ ! @# $ % ^ & * ( ) + = [ ] | < > , .任何符号

Hack 符号与 IE6、7 和 8 兼容：.

注意：以下符号直接用分号写在属性值中，中间不留空格。

与 IE8 兼容的 Hack 符号：\0/

与 IE8、9 和 10 兼容的 Hack 符号：\0

与 IE6、7、8、9 和 10 兼容的 Hack 符号：\9

例子：

/*hack符号在前*/
_border-radius: 10px;   /*IE6*/
+border-radius: 10px;   /*IE6\7*/
.border-radius: 10px;   /*IE6\7\8*/
/*hack符号在后*/
border-radius: 10px\0/;   /*IE8*/
border-radius: 10px\0;   /*IE8\9\10*/
border-radius: 10px\9;   /*IE6\7\8\9\10*/

2.针对不同版本编写独立的样式，其他浏览器无法识别。

示例：IE9 以上的浏览器使用这种单独的 .css 样式

示例：仅IE6浏览器使用的.css样式

4.其他特殊款式

1、手牌值和属性值

问题：浏览器不支持手值，但其他浏览器支持该值。

解决办法：统一使用属性值。

2.水平居中

问题：IE8及IE8以下浏览器无法通过设置：0 auto实现水平居中。

解决办法：可以通过设置 text-align:来实现。

3.属性值“”

问题：IE8及以下版本浏览器不支持属性值“”。

解决办法：谨慎使用属性值“”。

5.JS兼容性

1.ES6语法

问题：IE11不支持箭头函数、类语法等（报：语法错误），不支持Set和Map数据结构（无报错）和对象，支持let和const，IE10及以下不支持任何ES6句法。

解决方案：如果想让项目兼容IE浏览器，请使用ES5语法或者使用Babel进行转换。

2. 操作tr标签

问题：IE9及IE9以下浏览器无法操作tr标签的属性。

解决办法：td标签的属性是可以操作的。

3.阿贾克斯

问题：IE9及IE9以下浏览器无法使用Ajax获取界面数据。

解决方案：在使用Ajax请求之前设置..cors=true。

4.事件对象属性

问题：IE8及以下浏览器的事件对象只有属性，没有属性。

解决方案： obj =event.?event.:event..

5.DOM事件绑定

问题：IE8及以下版本的浏览器使用()方法，而其他浏览器使用()方法。

解决办法：确定IE浏览器版本。如果是IE8及以下事件绑定则使用()方法。注意 () 方法的用法。第一个参数是“”而不是“click”。并且没有第三个参数。