让人“蛋碎”的ie兼容问题

前段时间的一个项目，要做ie8及以上的兼容，那个做的我真的是蛋疼，菊花紧啊。。。。

当时就想问问微软ie的部门，你们到底想干虾米，这不是要逼死前段工程师吗。。。。

然后去Google上面找了好多关于兼容的文档，然后归类了一些，希望有跟我一样碰到这种问题的朋友们能够得到帮助，嘿嘿

以下我总结简单总结了几条：

不管你是不是做兼容，做为一个前端工程师，都要养成一个习惯，那就是用类（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兼容的时候遇到的一些蛋碎的问题，不管又没用，还是希望能够帮到需要的人，嘿嘿

来源：oschina

链接：https://my.oschina.net/u/2658398/blog/632781

标签

前端兼容

placeholder