IE7/8/9/Firefox/Google Chrome的css hack

一直不想调CSS的兼容,但是没有前端这破事就落到了我的身上。IE这坑爹的东西,IE7/8/9/10/11标准一个和一个不一样。

看下面的代码吧:

.search{
    height:30px;
    width:30px;
    position:absolute;
    margin-top:3px; // 以chrome为基准
    margin-top:10px\0; // IE8,但是\0包含的IE版本为:7/8/Edge
    +margin-top:2px; // IE7
}
:root .search{ // 注意:root选择器Firefox和Chrome都支持的
    margin-top:4px\9; // IE9/10,9和10的区别不是非常大,就这样或者IE10用CSS调
    margin-top:4px\0; // Edge模式,我不知道这是个什么模式反正也是坑爹的东西
}
@-moz-document url-prefix(){.search{margin-top:4px;}}; // 火狐

以上吧。

IE6没有,是因为我的IE没这个模式的选项,不过网上说的是_margin-top这样可以。

还有*margin-top好像IE6/7都支持,没试过。

IE调试