https://juejin.im/post/59a3f2fe6fb9a0249471cbb4

浏览器兼容性问题解决方案 · 总结

普及&＃xff1a;浏览器的兼容性问题&＃xff0c;往往是个别浏览器&＃xff08;没错&＃xff0c;就是那个与众不同的浏览器&＃xff09;对于一些标准的定义不一致导致的。俗话说&＃xff1a;没有IE就没有伤害。

贴士&＃xff1a;内容都是自己总结的&＃xff0c;不免会出现错误或者bug&＃xff0c;欢迎更正和补充&＃xff0c;本帖也会不断更新。

Normalize.css

不同浏览器的默认样式存在差异&＃xff0c;可以使用 Normalize.css 抹平这些差异。当然&＃xff0c;你也可以定制属于自己业务的 reset.css

<link href&＃61;"https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel&＃61;"stylesheet">

简单粗暴法

* { margin: 0; padding: 0; }

html5shiv.js

解决 ie9 以下浏览器对 html5 新增标签不识别的问题。

respond.js

解决 ie9 以下浏览器不支持 CSS3 Media Query 的问题。

<script src&＃61;"https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js">script>

picturefill.js

解决 IE 9 10 11 等浏览器不支持  标签的问题

<script src&＃61;"https://cdn.bootcss.com/picturefill/3.0.3/picturefill.min.js">script>

IE 条件注释

IE 的条件注释仅仅针对IE浏览器&＃xff0c;对其他浏览器无效

 

background-repeat: no-repeat; background-size: cover; -ms-behavior: url(&＃39;css/backgroundsize.min.htc&＃39;); behavior: url(&＃39;css/backgroundsize.min.htc&＃39;); }

IE6-7 line-height 失效的问题

问题&＃xff1a;在ie 中 img 与文字放一起时&＃xff0c;line-height 不起作用

解决&＃xff1a;都设置成 float

width:100%

width:100% 这个东西在 ie 里用很方便&＃xff0c;会向上逐层搜索 width 值&＃xff0c;忽视浮动层的影响.

Firefox 下搜索至浮动层结束&＃xff0c;如此&＃xff0c;只能给中间的所有浮动层加 width:100%才行&＃xff0c;累啊。

opera 这点倒学乖了&＃xff0c;跟了 ie

cursor:hand

显示手型 cursor: hand&＃xff0c;ie6/7/8、opera 都支持&＃xff0c;但是safari 、 ff 不支持

cursor: pointer;

td 自动换行的问题

问题&＃xff1a;table 宽度固定&＃xff0c;td 自动换行

解决&＃xff1a;设置 Table 为 table-layout: fixed&＃xff0c;td 为 word-wrap: break-word

让层显示在 FLASH 之上

想让层的内容显示在 flash 上&＃xff0c;把 FLASH 设置透明即可

1、" wmode " value&＃61;"transparent" />
2、"wmode" value&＃61;"opaque"/>

键盘事件 keyCode 兼容性写法

var inp &＃61; document.getElementById(&＃39;inp&＃39;)
var result &＃61; document.getElementById(&＃39;result&＃39;)function getKeyCode(e) {e &＃61; e ? e : (window.event ? window.event : "")return e.keyCode ? e.keyCode : e.which } inp.onkeypress &＃61; function(e) { result.innerHTML &＃61; getKeyCode(e) }

求窗口大小的兼容写法

// 浏览器窗口可视区域大小&＃xff08;不包括工具栏和滚动条等边线&＃xff09;
// 1600 * 525
var client_w &＃61; document.documentElement.clientWidth || document.body.clientWidth; var client_h &＃61; document.documentElement.clientHeight || document.body.clientHeight; // 网页内容实际宽高&＃xff08;包括工具栏和滚动条等边线&＃xff09; // 1600 * 8 var scroll_w &＃61; document.documentElement.scrollWidth || document.body.scrollWidth; var scroll_h &＃61; document.documentElement.scrollHeight || document.body.scrollHeight; // 网页内容实际宽高 (不包括工具栏和滚动条等边线&＃xff09; // 1600 * 8 var offset_w &＃61; document.documentElement.offsetWidth || document.body.offsetWidth; var offset_h &＃61; document.documentElement.offsetHeight || document.body.offsetHeight; // 滚动的高度 var scroll_Top &＃61; document.documentElement.scrollTop||document.body.scrollTop;

DOM 事件处理程序的兼容写法&＃xff08;能力检测&＃xff09;

var eventshiv &＃61; {// event兼容getEvent: function(event) {return event ? event : window.event;},// type兼容getType: function(event) {return event.type; }, // target兼容 getTarget: function(event) { return event.target ? event.target : event.srcelem; }, // 添加事件句柄 addHandler: function(elem, type, listener) { if (elem.addEventListener) { elem.addEventListener(type, listener, false); } else if (elem.attachEvent) { elem.attachEvent(&＃39;on&＃39; &＃43; type, listener); } else { // 在这里由于.与&＃39;on&＃39;字符串不能链接&＃xff0c;只能用 [] elem[&＃39;on&＃39; &＃43; type] &＃61; listener; } }, // 移除事件句柄 removeHandler: function(elem, type, listener) { if (elem.removeEventListener) { elem.removeEventListener(type, listener, false); } else if (elem.detachEvent) { elem.detachEvent(&＃39;on&＃39; &＃43; type, listener); } else { elem[&＃39;on&＃39; &＃43; type] &＃61; null; } }, // 添加事件代理 addAgent: function (elem, type, agent, listener) { elem.addEventListener(type, function (e) { if (e.target.matches(agent)) { listener.call(e.target, e); // this 指向 e.target } }); }, // 取消默认行为 preventDefault: function(event) { if (event.preventDefault) { event.preventDefault(); } else { event.returnValue &＃61; false; } }, // 阻止事件冒泡 stopPropagation: function(event) { if (event.stopPropagation) { event.stopPropagation(); } else { event.cancelBubble &＃61; true; } } };