浏览器兼容

Posted 2020-10-14 ~丸子

　　为了能让网站设计正常的运行于各种浏览器平台，网站设计师们不得不想尽办法处理好网站建设中的浏览器兼容问题。正是因为网站设计当中的这一需要产生了一项新技术— 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标