兼容性問題解決方案彙總（持續更新，歡迎收藏！）

沒有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.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;
}

兼容性問題解決方案彙總（持續更新，歡迎收藏！）

沒有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

HTML 行內元素和塊級元素全解析

完美解決IE不支持placeholder的問題

誰是 2016 年的 JavaScript 之最？

PHP 常量最全解析

JS 獲取當前日期時間（如：2017-03-17 18:55:03 星期六）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結