《阿勇java建站教程》1.5.1-css兼容

    

      1.5.1-css兼容

感谢你阅读这篇文章，希望你继续阅读《阿勇java建站教程》的其他文章！

上节内容（《1.5-css样式使用》）说的是css样式的基本使用，并无高深的内容，一切应用都应该在实践中体现，将来的实战部分将继续丰富！本节的内容说的还是css样式的使用，并且是个比较棘手的问题——css样式和浏览器的兼容！

css hack 这个词是我在建站的时候接触到的。坦白说，从培训以来，对各浏览器对样式兼容不统一的情况并没有引起重视。但也就是这个问题，对网站的推广，用户体验带来不必要的阻碍！
如今网页浏览器层出不穷，除IE，谷歌，火狐，opera几大实力巨作之外，国人的360浏览器，搜狗浏览器，qq，百度，猎豹等都来抢占市场！知名的、不知名的都企图分一杯羹！但是，毫无疑问的老大仍然是IE浏览器！IE浏览器的市场占有量在国内位居第一，经过了好几代的升级，IE浏览器却给网站开发带来麻烦！为了使自己的网站能在短期内推广开来，提升知名度，我们不得不照顾一下IE用户群，由于各浏览器解析css的能力和标准不同，很多时候同样的css样式在不同的浏览器下显示不同的结果！下面看一个例子：
#test   
    {   
        width:300px;   
        height:300px;   
          
        background-color:blue;      /*firefox*/
        background-color:red\9;      /*all ie*/
        background-color:yellow\0;    /*ie8*/
        +background-color:pink;        /*ie7*/
        _background-color:orange;       /*ie6*/
    }  
    :root #test { background-color:purple\9; }  /*ie9*/
    @media all and (min-width:0px){ #test {background-color:black\0;} }  /*opera*/
    @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }  /*chrome and safari*/

     不难看出，各大浏览器对background-color的样式加载不尽相同！为了让我们的网站能顺利的在各浏览器里顺利解析，显示预期效果，我们不得不给原本简易的css样式文件添加兼容代码，也就是css hack。同时，网上也有为兼容css开发出来的js库，为了兼容各浏览器，流行的js库也纷纷添加兼容性代码，从一定程度也节省里开发者的工作！为了能做出更美观，兼容行强的网页，需要不断地实践，积累经验，不断的学习！
在下节内容中，我将带领大家学习js的基本使用！结合js，能做出生动活泼的网页内容，同时也能为数据交互提供支持！尽请期待！

本文原创写的不好的地方欢迎大家与我一起交流（微信号:zhyy22145），转载请注明出处！-《阿勇java建站教程》1.5.1-css兼容

《阿勇java建站教程》统一交流团