讓人「蛋碎」的ie兼容問題

前段時間的一個項目，要作ie8及以上的兼容，那個作的我真的是蛋疼，菊花緊啊。。。。

當時就想問問微軟ie的部門，大家到底想幹蝦米，這不是要逼死前段工程師嗎。。。。

而後去Google上面找了好多關於兼容的文檔，而後歸類了一些，但願有跟我同樣碰到這種問題的朋友們可以獲得幫助，嘿嘿

如下我總結簡單總結了幾條：

1. 無論你是否是作兼容，作爲一個前端工程師，都要養成一個習慣，那就是用類（class）來控制樣式（css），用id來控制腳本（JavaScript），那這是爲何呢？  道理其實很簡單，在ie8如下的瀏覽器中，對於如下

#first #second{
    color：red；
}

        這種寫法是找不到這個元素的，因此有時候你會發如今google瀏覽器裏很和平的事情，到了ie中這個css就徹底消失了。

        還有控制樣式爲何要用id呢？由於id獲取到元素的步驟是最節約資源的，並且也是最直接的，因此各位新手小白前端們， 記住這個重要的步驟吧，確定會少走不少彎路的

    2.    由於要兼容ie8，而ie8是不支持css3.0的，有可能你的第一反應是，那就不用那些比較酷炫的效果嘍，然而若是你只是這麼想，那就圖樣了。。。  在css2.0中，對於css那些比較好用的選擇器，也是不支持的，舉個最簡單的例子哈，css2.0是支持：first-child這個選擇器的，而：last-child是不支持的，是否是很無語，反正我當時看到文檔的時候是沒話說了。。。。

    3.接下來提供幾種ie瀏覽器的css hack 方法：

        這是w3c的標準寫法：

margin:0;

        ie6:

_margin:0;

        ie7:

*margin:0;

        ie8:

margin:0\9;

        ie9/10:

margin:0\9\0;

    4.咱們都知道ie8是不支持css3.0屬性的，可是有的時候沒辦法，領導就是想在ie8下看到邊框圓角，那咋辦嘞，

    這裏提供一種方法

div{
    border-radius:5px;
    behavior:url(/pie.htc);
}

      看到這裏確定有朋友會問了，這個htc（下面我稱呼它爲火腿腸）是幹嗎用的嘞，其實很簡單，由於ie8的內核是沒有css3.0的那種圓角算法的，因此須要提供一個腳原本供它計算，哎。。。。這坑爹的ie啊，5555555~

    5.那就會有朋友來問了，萬一領導要是想用哪一個html5的屬性咋辦，ie8也是不兼容html5的呀。。。。

        對，我也遇到了一樣蛋碎的問題，具體咋辦類，在這裏，我已html中的placeholder這個屬性爲例，

        咱們借用jQuery，將這個屬性強行的注入的input元素中，來看代碼：

(function ($) {
    //動態的在input中加入一個input屬性
    $.support.placeholder = ('placeholder' in document.createElement('input'));
})(jQuery);

//fix for IE7 and IE8
$(function () {
    if (!$.support.placeholder) {
        $("[placeholder]").focus(function () {
            if ($(this).val() == $(this).attr("placeholder")) $(this).val("");
        }).blur(function () {
            if ($(this).val() == "") $(this).val($(this).attr("placeholder"));
        }).blur().parents("form").submit(function () {
            $(this).find('[placeholder]').each(function() {
                if ($(this).val() == $(this).attr("placeholder")) {
                    $(this).val("");
                }
            });
        });
    }
});

    6.介紹了這麼多細節上的兼容，那麼接下來就介紹一下比較簡單的框架兼容，在這裏我麼你是用了zui這個前端的ui框架，地址在這裏   zui.sexy/#/  ，那麼它的兼容方法我也順便提一下吧，咱們要在css文件加載以後，立刻加載一下兩個文件，

<!-- h5標籤兼容-->
<script src="/bower_components/zui/dist/lib/ieonly/html5shiv.js" ></script>
<!-- 響應式佈局兼容-->
<script src="/bower_components/zui/dist/lib/ieonly/respond.js" ></script>

記住，在加載完css文件以後，越快加載這兩個文件越好。

好啦，以上就是我在作ie兼容的時候遇到的一些蛋碎的問題，無論又沒用，仍是但願可以幫到須要的人，嘿嘿