移动互联网的今天，告别了ie6。
以下来自原先项目psc。psc已经删除，使用issues继续整理。相信这是一个更好的开始。整理到博客汇总。
浏览器的兼容性问题是前端开发人员最头痛的，PCS 收集并整理完美兼容的解决方案。低版本浏览器添加过多的脚本或者更多的代码势必会带来性能，维护成本。其实PCS 并非是完美的解法办法，最完美的是浏览器本身符合w3c标准。当然这不现实，要不要所有浏览器都真的完全表现一样，其实还要视项目而定，或许我们可以选择优雅降级处理。凡是一切都在权衡。
CSS/CSS3
Respond
inline-block
.dib-wrap {
font-size:0;/* 所有浏览器 */
*word-spacing:-1px;/* IE6、7 */
}
.dib-wrap .dib{
font-size: 12px;
letter-spacing: normal;
word-spacing: normal;
vertical-align:top;
}
@media screen and (-webkit-min-device-pixel-ratio:0){
/* firefox 中 letter-spacing 会导致脱离普通流的元素水平位移 */
.dib-wrap{
letter-spacing:-5px;/* Safari 等不支持字体大小为 0 的浏览器, N 根据父级字体调节*/
}
}
.dib {
display: inline-block;
*display:inline;
*zoom:1;
}
css3-gradient
HTML/HTML5
html5shiv
The HTML5 Shiv enables use of HTML5 sectioning elements in legacy Internet Explorer and provides basic HTML5 styling for Internet Explorer 6-9, Safari 4.x (and iPhone 3.x), and Firefox 3.x.
html5demos
A collection of HTML5 experiments I’ve created, now open source and on GitHub, so please go ahead and help me hack this resource in to a wealth of demos that other authors can learn from.
HTML5-History-API
video.js
jQuery-html5-placeholder
HTML5 Desktop Notifications
localstorage
store.js exposes a simple API for cross browser local storage
JavaScritp/ECMAScript
es5-shim
es5-shim.js and es5-shim.min.js monkey-patch a JavaScript context to
contain all EcmaScript 5 methods that can be faithfully emulated with a
legacy JavaScript engine.
IE/IE6/IE7/IE8
PIE
(PIE)(http://css3pie.com/) makes Internet Explorer 6-9 capable of rendering several of the most useful CSS3 decoration features.
通过脚本可以使得ie6/7/8/9 支持css3 的 border-radius、box-shadow、linear-gradient。
DD_belatedPNG
This is a Javascript library that sandwiches PNG image support into IE6 without much fuss.
处理ie6不支持png24。
DD_belatedPNG.fix('.png_bg, .png24'); // argument is a CSS selector
DD_belatedPNG.fixPng( someNode ); // argument is an HTMLDomElement
更多solution
IE下 z-index的层级问题
参考
ie6 不支持positon: fixed
解决方案
透明度 opacity/rgba
opacity设置的透明度对子元素都有影响。ie可以使用 filter 处理
.opacity{
background: rgb(255,255,0);
opacity: 0.4;
filter:alpha(opacity=40);
}
.rgba{
filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#7F000000', endColorstr='#7F000000');
}
:root .rgba{
filter:none; /*处理IE9浏览器中的滤镜效果*/
background-color:rgba(0,0,0,0.5);
}
ie6 max-width/max-height/min-height/min-width
.maxh{ max-height:300px; _height: expression(this.scrollHeight >= 300? '300px' : 'auto'); }
.maxw{ max-width: 300px; _width: expression(this.clientWidth >= 300 ? '300px' : 'auto'); }
.minh{ min-height: 300px; height:auto !important; _height: 300px; }
.minw{ min-width: 300px; _width: expression(this.clientWidth <= 300 ? '300px' : 'auto'); }