兼容性问题解决方案汇总(持续更新,欢迎收藏!)
2017-04-01 09:34
615 查看
没有IE就没有伤害
myreset.css
/** * 作品:myreset.css * 维护:白小明 * 版本:v1.0 | 2016.12.01 * 理念:清除和重置是紧密不可分的 * 特色:适应中文,基于最新主流浏览器 */ /* 清除内外边距 */ @charset "utf-8"; body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, pre,dl, dt, dd, ul, ol, li, fieldset, lengend, button, input, textarea, th, td { margin: 0; padding: 0; } /* 重置格式元素 */ ul, ol { list-style: none; } a { text-decoration: none; } a:hover { text-decoration: underline; } q:before, q:after { content: ''; } /* 重置表单元素 */ legend { color: #000; } /* for ie6 */ button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */ /* 重置表格元素 */ table { border-collapse: collapse; border-spacing: 0; }
工具:IE Tester
IETester包含多个版本的IE,可以方便的用来进行兼容性测试下载:http://www.my-debugbar.com/wiki/IETester/HomePage
win10好像不兼容?
更好的方法?:使用器IE11浏览器 F12 ,进入开发人员模式,可以设置 IE 版本及其他支持的浏览器内核
插件:IEalert
一款非常好用的提示IE浏览器过低的jquery插件虽然现在很多网站都已经放弃对IE6的支持,但是也会部分的用户使用的IE6浏览器,在没有友好的提示下用IE6打开网站的话就会看起很乱,用户可能看一次就不想看了,这样会导致一些潜在客户流失,此Jquery插件刚好解决了这个问题。
默认情况下是低于IE8浏览器都会弹出提示框,大家想看到效果就用IE6、IE7来打开运行 。
html5shiv
html5shiv主要解决HTML5提出的新的元素不被IE6、IE7、IE8识别通过document.createElement(elementName) 即可实现
放在里面,因为IE必须在元素解析前知道这个元素
cc:ie
<head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <!--[if lt IE 9]> <script type="text/javascript" src="js/html5.js"></script> <![endif]--> </head>
IE条件注释
IE的条件注释仅仅针对IE浏览器,对其他浏览器无效<!--[if lt IE 9]> <script type="text/javascript" src="js/html5.js"></script> <![endif]-->
CSS浏览器前缀
-o-transform:rotate(7deg); // opera -ms-transform:rotate(7deg); //ie -moz-transform:rotate(7deg); //火狐 -webkit-transform:rotate(7deg); //谷歌 transform:rotate(7deg); //统一标识语句
解决 IE6 不支持绝对定位 fixed 以及IE6下被绝对定位的元素在滚动的时候会闪动的问题
/* IE6 hack */ *html,*html body { background-image:url(about:blank); background-attachment:fixed; } *html #menu { position: absolute; top: expression(((e=document.documentElement.scrollTop) ? e : document.body.scrollTop) + 100 + 'px'); }
IE属性过滤器(较为常用的hack方法)
针对不同的IE浏览器,可以使用不同的字符来让特定的版本的IE浏览器进行样式控制。eventshiv
IE 与 非IE 事件驱动方式,跨浏览器兼容的事件处理程序(==能力检测==)// 兼容性处理封装在eventshiv对象的众多方法中 // 如:eventshiv.addHandler(btn, 'click', f1); var eventshiv = { // 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.srcElement; }, // 添加事件句柄 addHandler : function (element,type,listener) { if (element.addEventListener) { // 2级 DOM element.addEventListener(type, listener, false); } else if (element.attachEvent) { // IE element.attachEvent('on' + type, listener); } else { // 0级 DOM // element.onclick === element['onclick'] // 在这里由于.与'on'字符串不能链接,只能用后者 element['on' + type] = listener; } }, // 移除事件句柄 removeHandler : function (element,type,listener) { if (element.removeEventListener) { // 2级 DOM element.removeEventListener(type, listener, false); } else if (element.detachEvent) { // IE element.detachEvent('on' + type, listener); } else { // 0级 DOM // element.onclick === element['onclick'] // 在这里由于.与'on'字符串不能链接,只能用后者 element['on' + type] = null; } }, // 取消默认行为 preventDefault : function (event) { if (event.preventDefault) { // 非IE event.preventDefault(); } else { // IE event.returnValue = false; } }, // 阻止事件冒泡 stopPropagation : function (event) { if (event.stopPropagation) { // 非IE event.stopPropagation(); } else { // IE event.cancelBubble = true; } } }
求窗口大小的兼容写法:
// 浏览器窗口可视区域大小(不包括工具栏和滚动条等边线) // 1600 * 525 var client_w = document.documentElement.clientWidth || document.body.clientWidth; var client_h = document.documentElement.clientHeight || document.body.clientHeight; // 网页内容实际宽高(包括工具栏和滚动条等边线) // 1600 * 8 var scroll_w = document.documentElement.scrollWidth || document.body.scrollWidth; var scroll_h = document.documentElement.scrollHeight || document.body.scrollHeight; // 网页内容实际宽高 (不包括工具栏和滚动条等边线) // 1600 * 8 var offset_w = document.documentElement.offsetWidth || document.body.offsetWidth; var offset_h = document.documentElement.offsetHeight || document.body.offsetHeight; // 滚动的高度 var scroll_Top = document.documentElement.scrollTop||document.body.scrollTop;
防止IE浏览器进入怪异文档模式,兼容性视图(图片不居中等)
// 以最新的渲染模式渲染IE <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
解决在 IE6 下,列表与日期错位的问题
span 日期放在前面解决 IE6 不支持 min-height 属性的问题(CSS hack)
min-height: 350px; _height: 350px; /* 或者? */ .divBox{min-height:200px;height:auto!important;height:200px;overflow:visible;} .divBox{min-width:600px;_width:expression(document.body.clientWidth<600?"600px":"auto");}
让IE7 IE8支持CSS3 background-size属性
教程:http://www.dowebok.com/139.htmlGitHub:https://github.com/louisremi/background-size-polyfill
由于 background-size 是 CSS3 新增的属性,所以 IE 低版本自然就不支持了,但是老外写了一个 htc 文件,名叫 background-size polyfill,使用该文件能够让 IE7、IE8 支持 background-size 属性。其原理是创建一个 img 元素插入到容器中,并重新计算宽度、高度、left、top 等值,模拟 background-size 的效果。
html { height: 100%; } body { height: 100%; margin: 0; padding: 0; background-image: url('img/37.png'); background-repeat: no-repeat; background-size: cover; -ms-behavior: url('css/backgroundsize.min.htc'); behavior: url('css/backgroundsize.min.htc'); }
完美解决IE不支持placeholder的问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1>你好世界</h1> <!-- placeholder属性在IE中,只有 IE11 支持 --> <input type="text" class="placeholder" placeholder=""> <script type="text/javascript" src="js/jquery-3.1.1.min.js"></script> <script type="text/javascript"> $(document).ready(function() { // val()无参数是取值,有参数是设置 // 为了更好的兼容性,将下面的val()设置与input中的placeholder的值设置相同 $("input.placeholder").val("Enter your search text here"); textFill($('input.placeholder')); }); function textFill(input) { var originalvalue = input.val(); input.focus(function() { if ($.trim(input.val()) == originalvalue) { input.val(''); } }); input.blur(function() { c598 if ($.trim(input.val()) == '') { input.val(originalvalue); } }); } </script> </body> </html>
a标签CSS顺序
很多新人在写a标签的样式,会疑惑为什么写的样式没有效果,其实只是写的样式被覆盖了。有个简单的记法是,取首字母组成 ==love hate==,记住“爱恨”就行了。
正确的a标签顺序应该是:
link:平常的状态
visited:被访问过之后
hover:鼠标放到链接上的时候
active:链接被按下的时候
24位的png图片
IE6不支持透明咋办?使用png透明图片呗,但是需要注意的是24位的PNG图片在IE6是不支持的,解决方案有两种:使用8位的PNG图片
为IE6准备一套特殊的图片
IE6 双边距
行内属性设置了块级属性(display: block;)后,会产生双倍边距。解决方案是在添加一个 display: inline; 或者 display: table;
双倍margin
浮动元素设置了margin在IE6下会产生双倍margin。只要给浮动元素设置 display: inline;就可以了。或者说使用IE6的hack:_margin;
双倍float
.divBox{ float:left; width:100px; margin:000100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略 }
透明度
IE9 以下不能使用 opacityopacity: 0.5; filter: alpha(opacity=50); filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50);
ul列表边距属性不统一
IE下 ul的边距是使用marginfirefox下ul的边距是使用padding
重置CSS基本样式, 统一使用margin或者padding
IE6下select元素显示bug
select元素在IE6下是以窗口的形式展现的,所以在你需要弹出一个提示框(modal)的时候,你会发现select在modal的上面,无论你设置多大z-index都无效。解决的方法也很简单,利用一个透明的iframe盖住select就可以了
<div class="wrapper"> <!--[ifIE6]> <iframestyle="position:absolute;top:0;left:0;width:100%;height:100px;z-index:-1;filter:alpha(opacity=0);opacity=0;border-style:none;"></iframe> <![endif]--> </div>
indexof()
IE8以下不兼容indexof()方法, 添加indexof的原型方法即可;if (!Array.prototype.indexOf) { Array.prototype.indexOf = function(elt) { varlen = this.length >>> 0; varfrom = Number(arguments[1]) || 0; from = (from < 0) ? Math.ceil(from) : Math.floor(from); if (from < 0) { from += len; } for (; from < len; from++) { if (frominthis && this[from] === elt) { returnfrom; } } return -1; }; }
键盘事件 keyCode
http://www.runoob.com/try/try.php?filename=tryjsref_event_key_keycodefunction getKeyCode(e) { //兼容IE和Firefox获得keyBoardEvent对象 e = e ? e : (window.event ? window.event : "") //兼容IE和Firefox获得keyBoardEvent对象的键值 return e.keyCode ? e.keyCode : e.which; }
相关文章推荐
- C语言小问题解决方案(持续更新)
- 各种问题解决方案总结【记录】(持续更新)
- IE下常见兼容性问题记录汇总(04-持续更新)
- 各种问题解决方案总结【记录】(持续更新)
- CSS常见兼容问题解决方案(持续更新)
- AS小问题解决方法汇总(持续更新)
- IE兼容性问题汇总【持续更新中】
- JavaWeb项目 积累问题解决方案,持续更新中
- sublime 使用中一些遇到问题解决方法和技巧汇总(持续更新)
- 运维常见问题及解决方法汇总(持续更新...)
- Ubuntu 学习问题及解决方法 汇总 持续更新。。。
- java开发中遇到的问题及解决方法(持续更新)
- [置顶] Android 开发问题汇总(持续更新)
- zookeeper各种报错、原因及解决方法汇总(持续更新)
- ie兼容性问题(持续更新)
- 嵌入式开发常见问题汇总 - 持续增加更新
- torch问题及解决方案汇总(持续更新)
- 在Windows系统下Git使用过程中配到的一些问题汇总(持续更新)
- 帆软报表FineReport数据连接中游标问题解决方案汇总
- web应用下的安全问题以及tomcat/nginx对应解决方法(持续更新、亲测可解决问题)