网站建设必备：如何做到网站浏览器兼容？
IT市场越是发达，可供网民们使用的网络工具就越多，这其中包括各色各样的浏览器，不同风格不同习惯的浏览器虽然在大程度上满足了不同爱好的网民朋友但却给网站设计师们带来了困惑。
为了能让自己的网站设计正常的运行于各种浏览器平台，建设网站时程序员都会装有多款的浏览器，来测试网站的兼容，如果有某种浏览器不能正常显示，就意味着需要调整了。
那么问题来了，全球这么多浏览器，都要做兼容吗？
目前全球市面的上浏览器非常多，也许足有100多种，但我们在网页制作过程中，只需要对主流浏览器进行兼容测试。这包括：IE、火狐(Firefox)、谷歌(Chrome)、苹果(Safari)、Opera等几款全球应用范围最广的浏览器。
一、常见的兼容性问题
1.BUG：不同浏览器标签默认的margin和padding不同。
Hack:css里增加通配符*{margin：0；padding：0}
2.BUG：图片默认又间距。
Hack:使用float为img布局
3.BUG：当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度
Hack：超出高度的标签设置overflow：hidden，或者设置line-height的值 小于你的设置高度
4.BUG：IE9以下浏览器不能使用opacity
Hack：filter：alfha（opacity=50） 备注：这里面的opacity的值取值范围 （1-100），相当于正常设置opacity：0.5。
5.BUG：IE与宽度和高度的问题。(IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。如果只用宽度和高度，正常的浏览 器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。在设置背景图片的时候会用到)
Hack:#box{width: 80px;height: 35px;}html>body #box{width: auto;height: auto;min-width: 80px;min-height: 3 5px;}
浏览器兼容性问题解决的办法都是实践中来到实践中去，有很多前辈给我们做了铺垫，但凡事都有局限性，所以，遇到了问题我们也必须去克服。
二、避免兼容性的技巧
我们整理了几条编码模式与经验来解决支持旧IE浏览器的技巧分享给大家。
1、使用模板如HTML5 Boilerplate进行开发
很多成熟的模板各方面都做得很到位，这些准则对以现代浏览器为目标的项目和需要旧浏览器（低至IE6都能很好的支持）支持的项目工作得一样好。直接拿来使用不但可以节省时间更能减少一些IE兼容问题。
2、使用标准是IE10来开发项目
它能实时分析你的网站，准确的找到问题的类型并给出解决方法。通过在你的代码中包括一个简单的JavaScript脚本文件，在你的页面你就能得到可视化的结果。它也可以被集成进Fidder HTTP分析工具。
3、不盲目使用polyfills和shims
polyfills和shims提供了代码和标签，可以帮助模拟标准的API和功能，但在使用时一定要能保证实用，更便于以后的开发和修改。
4、多版本多浏览器测试，确认无误后再上线。
检查有没有警告或错误信息后，再提交项目，不然让客户或老板发现了多尴尬。
5、使用标签
最新的HTML5标签，改善了标签的语义化，但需要特殊的辅助脚本让IE6，7和8认识他们。页面在太旧的浏览器或者禁止脚本时无法使用HTML5标签，那么使用标签是对这些情况比较靠谱的解决方法。
6、css文件应该在head里引入，js最后引入。
如果body中引入CSS会导致页面全空，直到CSS加载后才显示。若在头部引入则让浏览器尽早地读取他们，就可以避免上述的情况。Js在最后引入则可以加快网站的打开速度，能很好的提高用户体验。一元广告投放
7、简洁、特定浏览器的css样式。
不要到处是无法重用的的id和class，避免使用"！imporant"。为html或body标签添加特定浏览器的class，并在css规则中使用。而不是hack。这样不但利于seo网站优化，更让二次开发提供便利。
8、JavaScript大限度以用户体验为中心
尽可能在Ready后立刻执行脚本。如果Ajax关系用户交互，越早请求越好，延迟加载非必要的脚本（如Facebook Like，Google +1，Twitter）等。
创新互联网站建设，为您提供一站式网站建设推广方案：成都免费做网站,成都免费做网站公司
本文标题：网站建设必备：如何做到网站浏览器兼容？
分享链接：http://scyanting.com/article/chhohd.html
为了能让自己的网站设计正常的运行于各种浏览器平台，建设网站时程序员都会装有多款的浏览器，来测试网站的兼容，如果有某种浏览器不能正常显示，就意味着需要调整了。
那么问题来了，全球这么多浏览器，都要做兼容吗？
目前全球市面的上浏览器非常多，也许足有100多种，但我们在网页制作过程中，只需要对主流浏览器进行兼容测试。这包括：IE、火狐(Firefox)、谷歌(Chrome)、苹果(Safari)、Opera等几款全球应用范围最广的浏览器。
一、常见的兼容性问题
1.BUG：不同浏览器标签默认的margin和padding不同。
Hack:css里增加通配符*{margin：0；padding：0}
2.BUG：图片默认又间距。
Hack:使用float为img布局
3.BUG：当标签的高度设置小于10px，在IE6、IE7中会超出自己设置的高度
Hack：超出高度的标签设置overflow：hidden，或者设置line-height的值 小于你的设置高度
4.BUG：IE9以下浏览器不能使用opacity
Hack：filter：alfha（opacity=50） 备注：这里面的opacity的值取值范围 （1-100），相当于正常设置opacity：0.5。
5.BUG：IE与宽度和高度的问题。(IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。如果只用宽度和高度，正常的浏览 器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。在设置背景图片的时候会用到)
Hack:#box{width: 80px;height: 35px;}html>body #box{width: auto;height: auto;min-width: 80px;min-height: 3 5px;}
浏览器兼容性问题解决的办法都是实践中来到实践中去，有很多前辈给我们做了铺垫，但凡事都有局限性，所以，遇到了问题我们也必须去克服。
二、避免兼容性的技巧
我们整理了几条编码模式与经验来解决支持旧IE浏览器的技巧分享给大家。
1、使用模板如HTML5 Boilerplate进行开发
很多成熟的模板各方面都做得很到位，这些准则对以现代浏览器为目标的项目和需要旧浏览器（低至IE6都能很好的支持）支持的项目工作得一样好。直接拿来使用不但可以节省时间更能减少一些IE兼容问题。
2、使用标准是IE10来开发项目
它能实时分析你的网站，准确的找到问题的类型并给出解决方法。通过在你的代码中包括一个简单的JavaScript脚本文件，在你的页面你就能得到可视化的结果。它也可以被集成进Fidder HTTP分析工具。
3、不盲目使用polyfills和shims
polyfills和shims提供了代码和标签，可以帮助模拟标准的API和功能，但在使用时一定要能保证实用，更便于以后的开发和修改。
4、多版本多浏览器测试，确认无误后再上线。
检查有没有警告或错误信息后，再提交项目，不然让客户或老板发现了多尴尬。
5、使用标签
最新的HTML5标签，改善了标签的语义化，但需要特殊的辅助脚本让IE6，7和8认识他们。页面在太旧的浏览器或者禁止脚本时无法使用HTML5标签，那么使用标签是对这些情况比较靠谱的解决方法。
6、css文件应该在head里引入，js最后引入。
如果body中引入CSS会导致页面全空，直到CSS加载后才显示。若在头部引入则让浏览器尽早地读取他们，就可以避免上述的情况。Js在最后引入则可以加快网站的打开速度，能很好的提高用户体验。一元广告投放
7、简洁、特定浏览器的css样式。
不要到处是无法重用的的id和class，避免使用"！imporant"。为html或body标签添加特定浏览器的class，并在css规则中使用。而不是hack。这样不但利于seo网站优化，更让二次开发提供便利。
8、JavaScript大限度以用户体验为中心
尽可能在Ready后立刻执行脚本。如果Ajax关系用户交互，越早请求越好，延迟加载非必要的脚本（如Facebook Like，Google +1，Twitter）等。
创新互联网站建设，为您提供一站式网站建设推广方案：成都免费做网站,成都免费做网站公司
本文标题：网站建设必备：如何做到网站浏览器兼容？
分享链接：http://scyanting.com/article/chhohd.html
