PC端兼容和浏览器内核及网站优化

1、IE浏览器内核：Trident内核，也是俗称的IE内核； 
2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核； 
3、Firefox浏览器内核：Gecko内核，俗称Firefox内核； 
4、Safari浏览器内核：Webkit内核； 
5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核； 

6、360浏览器、猎豹浏览器内核：IE+Chrome双内核； 
7、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）； 
8、百度浏览器、世界之窗内核：IE内核； 
9、2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核；

css属性兼容

*    ， ie6,ie7可以识别；
_和- ，  ie6可以识别；
!important  ,表示高优先级，ie7及以上，firefox都支持，ie6认识带!important的样式属性，但不认识!important的优先级；
-webkit- ，针对safari，chrome浏览器的内核CSS写法
-moz-，针对firefox浏览器的内核CSS写法
-ms-，针对ie内核的CSS写法
-o-，针对Opera内核的CSS写法

举个例子border-radius
-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
-o-border-radius: 10px; 
border-radius: 10px;

这里必须注意的是标准写法（不带前缀的）必须放在最后，否则容易造成渲染出意外的结果~

浏览器hack兼容处理
条件注释法(IE10+已经不支持条件注释)
信息提示  小于=>lt    小于等于=>lte    大于=>gt    大于等于=>gte

[1]IE9-(<!--[if IE]><![endif]-->)

[2]仅单一IE(<!--[if IE 6]><![endif]-->)

[3](<!--[if gte IE 8]><![endif]-->)

[4]非IE(IE10+也能识别)，此处多加的<-->，在IE中被当作内部注释，而在非IE浏览器中会闭合之前的注释(<!--[if !IE]><--><![endif]-->)

CSS hack
【1】属性前缀法(只有IE支持)

[1]IE6-(下划线、中划线)(_color:blue;-color:blue;)

[2]IE7-(星号、加号)(*color:blue;+color:blue;)

[3]IE10-(\9)(color:blue\9;)

[4]IE8+(\0)(color:blue\0;)

[5]IE9、IE10(\9\0)(color:blue\9\0;)

【2】选择器前缀法

[1]IE6-(*html)

[2]IE7(*+html)

[3]IE8(@media \0)

[4]IE9+及其他非IE浏览器(:root)

[5]firefox(x:-moz-any-link,)

[6]chrome、safari、opera(@media screen and (-webkit-min-device-pixel-ratio:0))

浏览器默认样式重置——Eric Meyer的原版
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6，p,blockquote,pre,a,abbr,acronym,address,
big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,
ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: black;
    background: white;
}
ol,ul{
    list-style: none;
}
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption,th,td {
    text-align: left;
    font-weight: normal;
}
blockquote:before,blockquote:after,q:before,q:after {
    content: "";
}
blockquote,q {
    quotes: "" "";
}

《高性能网站建设指南》这本书中提出了一些规则：

规则1——减少HTTP请求
规则2——使用内容发布网络
规则3——添加Expires头
规则4——压缩组件
规则5——将样式表放在顶部
规则6——将脚本放在底部
规则7——避免CSS表达式
规则8——使用外部JavaScript和CSS
规则9——减少DNS查找
规则10——精简JavaScript
规则11——避免重定向
规则12——移除重复脚本
规则13——配置ETag
规则14——使AjaX可缓存