浏览器兼容性问题

几大主流浏览器及其内核

浏览器最关键的部分就是它的渲染引擎（Rendering Engine），也就是大家平常所说的的“内核”。

五大浏览器内核

• Trident （MSHTML） （三叉戟；三叉线；三齿鱼叉）
• Gecko （壁虎）
• Presto （ 迅速的）
• Webkit （Safari内核,Chrome内核原型,它是苹果公司自己的内核，也是苹果的Safari浏览器使用的内核）
• Blink (由Google和Opera Software开发的浏览器排版引擎)

什么是浏览器兼容问题

同一份代码，有的浏览器效果正常，有的不正常。
要不要做

• 产品的角度（产品的受众、受众的浏览器比例、效果优先还是基本功能优先）
• 成本的角度 (有无必要做某件事)

渐进增强和优雅降级

渐进增强(progressive enhancement)：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进
行效果、交互等改进和追加功能达到更好的用户体验

优雅降级(graceful degradation)：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

常见浏览器css兼容问题及其解决方法

• div中的图片间隙
  bug：在块元素中插入图块状元素片时，有时图片会将块元素下方撑大三像素。
  Hack：将转为，给添加声明：display:block;

• 表单元素行高不一致
  bug：表单元素行高对齐方式不一致
  hack:给表单元素添加声明：float:left;

• 按钮元素默认大小及样式不一 致
  hack1： 统一大小及样式
  hack2:input外边套一个标签，在这个标签里写按钮的样式，把input的边框去掉。
  hack3:如果这个按钮是一个图片，直接把图片作为按钮的背景图即可。

• 鼠标指针bug
  描述：cursor属性的hand属性值只有IE8浏览器识别;
  hack:如统一某元素鼠标指针形状为手型，应添加声明：cursor:pointer;

• 透明属性
  IE浏览器写法：filter:alpha(opacity=数值);取值范围 1-100(IE8以下)
  兼容其他浏览器写法：opacity:数值;(数值的取值范围0-1,0.1,0.2,0.3-----0.9)

• 当li里的A加display:block或float:left时，出现行高不一致，有的会多出3像素；
  hack1：给a加display：inline-block；
  hack2：给a加display：inline;
  Hack3：给li加float，并加宽度；

• 父元素里有块元素，如果给子元素添加添加margin-top,父元素会下来。
  Hack1：给父元素添加overflow：hidden；
  Hack2：给子元素添加float；
  Hack3：给父元素加边框；
  或者用其他的方法达到我们想要的效果：如给父元素加padding-top.