网站设计代码要考虑不同浏览器兼容性
作者：佚名 时间：2012-02-18
网站设计代码要考虑不同浏览器兼容性
IT市场越是发达，可供网民们使用的网络工具就越多，这其中包括各色各样的浏览器，不同风格不同习惯的浏览器虽然在最大程度上满足了不同爱好的网民朋友但却给上海网站设计师们带来了困惑，为了能让网站设计正常的运行于各种浏览器平台，网站设计师们不得不想尽办法处理好网站建设中的浏览器兼容问题。正是因为网站设计当中的这一需要产生了一项新技术— CSS Hack。
CSS Hack 就是针对不同浏览器写出不同的 CSS code 的过程，主要用来解决目前各类浏览器无法标准解析CSS样式，导致同一网站设计页面在不同浏览器下出现显示效果不一致的兼容问题。
针对不同浏览器，我们可以将CSS Hack 网站设计代码整理如下：
1、针对I E 系列浏览器的网站设计代码
针对 IE 6 的专属 CSS Hack 网站设计代码
#id{
_display: block;
}
也就是在网站设计CSS属性前加一个小划线就好。
针对 IE 7 的专属 CSS Hack 网站设计代码
#id{
*display: block;
}
即在网站设计CSS属性前加上一个星号即可
针对 IE 8 的专属 CSS Hack 网站设计代码
#id{
margin-top: 10px 9; /*IE8*/
}
如上所示，解决办法为在网站设计CSS属性后分号前加上空格与斜线并加入一个数字9即可
2、针对火狐的CSS Hack 网站设计代码
火狐可谓是最标准的浏览器之一了，网站设计技术只要稍稍不到位就能体现得淋漓尽致，所以不少网站设计师也很头痛，其实想要解决火狐的兼容性除了要把网站设计的基础知识扎牢之外只要将CSS代码写入到下图 @-moz-document url-prefix（）{ } 里面就行了
@-moz-document url-prefix()
{
#id{ display: block; }
}
3、针对 Safari 的CSS Hack 网站设计代码
Safari是苹果计算机的最新作业系统Mac OS X中新的浏览器，用来取代之前的Internet Explorer for Mac，它使用了KDE的KHTML作为浏览器的运算核心。
@media screen and (-webkit-min-device-pixel-ratio:0)
{
#id { display: block; }
}
它的兼容性做法和火狐相近。
4、针对 Opera 的CSS Hack 网站设计代码
Opera即Opera Software ASA，是台式机、各种设备和移动网络浏览器市场的商业领袖，因快速、小巧和比其他浏览器更佳的标准兼容性获得了国际上的最终用户和业界媒体的承认，并在网上受到很多人的推崇。
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
head~body #id { display: block; }
}
这个世界上必然不会存在绝对完美的事物，因此运用以上方法让我们的网站设计更好的与各种浏览器兼容的时候其实已经违反了网站制作的W3C标准，但如果网站都不能正常打开，那些所谓的标准又有什么意思呢？这需要根据实际情况来取决
