上周天的时候有个学长找我帮忙做三张页面，因为没有数据交换之类的，只是单纯的前端页面，想着好久没做东西， 看书都看烦了，所以就接了也当是练手。之前因为没有系统的看书，所以其实很多问题都考虑的不全面，属于知其然不知其所以然的状态，虽然现在也还有很多要学的东西，但是知道自己的不足总比不知道强吧？而且这也算是一种进步？总之，遇到各种问题，然后我发现问题主要分为两类，一：我自己知识点不够所以不知道怎么解决的，这种问题大多求问度娘或者问大神是可以搞定的；二：属于确实是现阶段技术存在漏洞的，不论是还没能实现的、实现了但存在歧义或冲突的皆在此列。而就我这次做的页面我遇到最大的问题就是浏览器兼容性的问题，有了解决方法的就在此和大家分享，希望能够抛砖引玉，我也能学到更多的知识，谢谢。
正文：
1.遇到问题：当前浏览器为ie7及以下版本
解决思路：用一个div覆盖，让用户不能看到正常页面呈现的内容
实现方法：将正常是显示内容的div的display属性设置为none，将覆盖div的display属性设置为block（PS：在其中可以加入浏览器下载链接，让用户尽快正常浏览页面）
2.遇到问题：ie8中不能实现圆角，因为ie8不能很好的支持css3
解决思路：下载PIE使得ie8支持css3中的圆角
实现方法：这里的实现方法就不细说了，下载然后[behavior: url(path/PIE.htc);]把路径更改了就能够访问了，说一下需要注意的几点问题：
（1）这个引用一定要放在html文件里面，而且路径也是相对于引用的html文件而言的，放在css文件里面不会有效果
（2）如果发现引用成功之后，需要圆角的对象消失了，不要方，去洗个澡出来就好了，亲测
开玩笑的，我确实去洗了个澡但是并没有出现，所以代码出现BUG什么的，求神拜佛到底是没用啊（摊手），从头调了一遍，又去百度了一下，发现问题了，是因为z-index的缘故，但只 设置一个z-index没有效果，哦~原来它的position属性不能是static即默认值，ok，设置position为relative就ok啦，完美的圆角在ie8就实现啦~（在此我真诚的感谢写出PIE的工程师 们确实是因为你们的努力才让我如此轻松的实现了我想要的效果，康桑阿米达~）
3.遇到问题：依然是ie8，不能支持css3中的@media screen and (....)实现响应式布局
解决思路：没办法，谁让它是磨人的小妖精呢？（耸肩）单独写一个js文件获取屏幕宽度，然后再分别添加对应样式
实现方法：[ ]放在html中，然后在引入的js文件中实现就ok了。说一个期间遇到的痛苦的事情给大家乐一乐， 我搞了半天，发现莫名其妙就是不行，去网上找了各个大神的代码来，一一对照就是 不行 ！怎么能不行呢，这是多么伤自尊的事情啊。然后发现，居然是因为在"ie9"和[>]之间多了一个空
（手动再见）。不过调出BUG之后那种成就感还是有的哈，就是知道是因为这个原因，有种[让我想先杀自己100遍好了]的感觉。
js代码贴在下面，其实原理很简单。主要是其中有innerWidth和clientWidth的一些小区别，如果有疑问的话网上有很多大神的详细解析可以搜来看看。
/* 用于兼容ie8实现不同宽度窗口的响应式布局 */
function getWidthHeight(){
var wWidth,wHeight;
// 获取窗口宽度
if (window.innerWidth){
wWidth = window.innerWidth;
} else if (document.body && document.body.clientWidth){
wWidth = document.body.clientWidth;
}
// 获取窗口高度
if (window.innerHeight){
wHeight = window.innerHeight;
} else if (document.body && document.body.clientHeight){
wHeight = document.body.clientHeight;
}
// 通过深入Document内部对body进行检测，获取窗口大小
if (window.documentElement && window.documentElement.clientWidth && window.documentElement.clientHeight){
wWidth = window.documentElement.clientWidth;
wHeight = window.documentElement.clientHeight;
}
return {"wWidth":wWidth,"wHeight" :wHeight};
}
$(document).ready( function (){
var wWidth = getWidthHeight().wWidth;
if (wWidth ){
$( "body").css("font-size","5px" );
} else if (wWidth > 900 && wWidth ){
$( "body").css("font-size","8px" );
} else if (wWidth > 1200 ){
$( "body").css("font-size","10px" );
}
});