兼容性问题解决方案汇总（持续更新，欢迎收藏！）

没有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级 DOMelement.addEventListener(type, listener, false);} else if (element.attachEvent) {// IEelement.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级 DOMelement.removeEventListener(type, listener, false);} else if (element.detachEvent) {// IEelement.detachEvent('on' + type, listener);} else {// 0级 DOM// element.onclick === element['onclick']// 在这里由于.与'on'字符串不能链接，只能用后者element['on' + type] = null;}},// 取消默认行为preventDefault : function (event) {if (event.preventDefault) {// 非IEevent.preventDefault();} else {// IEevent.returnValue = false;}},// 阻止事件冒泡stopPropagation : function (event) {if (event.stopPropagation) {// 非IEevent.stopPropagation();} else {// IEevent.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.html
GitHub：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() {if ($.trim(input.val()) == '') {input.val(originalvalue);}});}</script>
</body>
</html>

a标签CSS顺序

很多新人在写a标签的样式，会疑惑为什么写的样式没有效果，其实只是写的样式被覆盖了。
有个简单的记法是，取首字母组成 ==love hate==，记住“爱恨”就行了。
正确的a标签顺序应该是：
1. link:平常的状态
2. visited:被访问过之后
3. hover:鼠标放到链接上的时候
4. active:链接被按下的时候

24位的png图片

IE6不支持透明咋办？使用png透明图片呗，但是需要注意的是24位的PNG图片在IE6是不支持的，解决方案有两种：
1. 使用8位的PNG图片
2. 为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 以下不能使用 opacity

opacity: 0.5;
filter: alpha(opacity=50);
filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50);

ul列表边距属性不统一

IE下 ul的边距是使用margin
firefox下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_keycode

function getKeyCode(e) {//兼容IE和Firefox获得keyBoardEvent对象e = e ? e : (window.event ? window.event : "")//兼容IE和Firefox获得keyBoardEvent对象的键值return e.keyCode ? e.keyCode : e.which;
}

兼容性问题解决方案汇总（持续更新，欢迎收藏！）相关推荐

hive的错误编码+解决方案汇总(持续更新中)
我在尝试导入hive的udtf的时候碰到了这么个问题: 编码解决方案 (state=08S01,code=0) $HIVE_HOME/bin/hive --service metastore &am ...
【教程汇总+持续更新】Unity游戏开发从入门到入坟
新的一年,本该在年前整理的年终总结被拖到了年后开工.去年大量时间投入在Catlike教程的翻译上,截止目前位置,教程的进度已经完全追平原作者. 去年还有一部分是断断续续的更新SLG实战教程,但遗憾的是 ...
iOS精品资源汇总(持续更新)
文章目录引言 I.iOS自定义视图相关热门资源 1.1 <用户协议及隐私政策>弹框 1.2 电子签名 1.3 商品详情页 1.4 上传图片视图的封装[支持删除和添加] 1.5 查看风险商 ...
webpack1.x环境配置与打包基础【附带各种 “坑“ 与解决方案！持续更新中...】
webpack1.x环境配置与打包基础[附带各种 "坑" 与解决方案!持续更新中...] 参考文章: (1)webpack1.x环境配置与打包基础[附带各种 "坑&quo ...
【帆软报表】使用技巧及常见问题汇总-持续更新
[帆软报表]使用技巧及常见问题汇总-持续更新 1.重复与冻结设置,做用:冻结区域模板-重复与冻结设置 2.单元格有效小数设置选中单元格-格式-数字-#0.00 3.图表中有效小数设置图表属性表- ...
QML中文手册(持续更新...建议收藏)
最近学习QML,中间遇到了一些问题,难免要翻阅一些资料,当查看到官方文档时候,我的小脑袋,有点扛不住了,全是英文,所以这里我打算把我看到的,学习过程中接触到的文档都翻译成中文,有些是机翻,有些是人为. ...
Telegram Android源码问题汇总持续更新
libtgvoip目录为空 git clone下来的工程中带有submodule时,submodule的内容没有下载下来,执行如下命令 cd Telegram git submodule update ...
吉大计算机专硕报录比,22考研院校报录比汇总(持续更新)
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 22考研院校报录比汇总(持续更新) 每个考研的小伙伴最关心的就是你所报考学校的报录比,因为这直接关系到你报考院校的难易程度,从中可以看出各高校的整体录取情 ...
Unity学习知识和链接汇总-持续更新
Unity学习知识和链接汇总-持续更新 Unity Scripting Reference- https://docs.unity3d.com/Manual/index.html gitee http ...
unity ui框架_[教程汇总+持续更新]Unity从入门到入坟——收藏这一篇就够了
----------------塔防(更新中),作者重写了基础篇(下方目录为:1.1(新) 基础)目前还在持续连载了5篇,因为不多我们更新完就能追到原作者的进度了------------------- ...

兼容性问题解决方案汇总（持续更新，欢迎收藏！）

没有IE就没有伤害

myreset.css

工具：IE Tester

插件：IEalert

html5shiv

IE条件注释

CSS浏览器前缀

解决 IE6 不支持绝对定位 fixed 以及IE6下被绝对定位的元素在滚动的时候会闪动的问题

IE属性过滤器（较为常用的hack方法）

eventshiv

求窗口大小的兼容写法：

防止IE浏览器进入怪异文档模式，兼容性视图（图片不居中等）

解决在 IE6 下，列表与日期错位的问题

解决 IE6 不支持 min-height 属性的问题（CSS hack）

让IE7 IE8支持CSS3 background-size属性

完美解决IE不支持placeholder的问题

a标签CSS顺序

24位的png图片

IE6 双边距

双倍margin

双倍float

透明度

ul列表边距属性不统一

IE6下select元素显示bug

indexof()

键盘事件 keyCode

兼容性问题解决方案汇总（持续更新，欢迎收藏！）相关推荐

最新文章

热门文章