不同浏览器兼容

不同浏览器的前缀

-webkit- : Chrome, Safari
-ms- : IE
-moz- : Firefox
-o- : Opera

 

    /*渐进增强*/
    .div1 {
        -webkit-transition: all 2s; //Safari Chrome
           -moz-transition: all 2s; //Firefox
             -o-transition: all 2s; //Opera
                transition: all 2s; 
    }


    /*优雅降级*/
    .div1 {
                transition: all 2s; 
             -o-transition: all 2s; //Opera
           -moz-transition: all 2s; //Firefox
        -webkit-transition: all 2s; //Safari Chrome
    }

渐进增强（progressive enhancement）

1. 从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能，当浏览器支持时，它们会自动地呈现出来并发挥作用
2. 认为应关注于内容本身。内容是建立网站的诱因，我们应该在满足向绝大部分用户呈现有用内容的前提下，再做渲染内容或更高级功能的事情

 

优雅降级（graceful degradation）

1. 一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
2. 认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段

 因此：决定采用哪种方式取决于网站所面向的主要用户群体（或者说主要兼容的浏览器）

 

 

网页乱码的问题是如何产生的？怎样解决 ?

乱码的产生：　　由于网页的编码方式和浏览器的解析方式不同，导致浏览器无法解析代码，从而出现了乱码
解决：　　　　  查看保存网页的编码方式，然后再浏览器设置相同的编码方式来渲染网页

 

Chrome浏览器自动填充的背景色改变

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}