让人“蛋碎”的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兼容的时候遇到的一些蛋碎的问题，无论又没用，仍是但愿可以帮到须要的人，嘿嘿