浏览器兼容问题

主流浏览器：IE、Safari、Mozilla FireFox、Google Chrome、Opera、国产

浏览器内核及其代表作（内核：渲染引擎）

• Trident: IE, 腾讯，360等国产浏览器(不开源）
• Gecko: Mozilla FireFox,开源，跨平台
• Presto: Opera，浏览器排版引擎，渲染速度最快
• Webkit: Safari, Chrome, 开源，Safari用的是Chrome的内核原型
• Blink：由Google和Opera Software开发的浏览器排版引擎

　（目前越来越多的浏览器使用双核引擎来实现）

CSS Hack: Css中，Hack是指一种兼容CSS在不同浏览器中正确显示的技巧方法，都属于个人对CSS代码的非官方的修改，或非官方的补丁

Filter: 表示过滤器的意思，是一种对特定的浏览器或浏览器组显示或隐藏规则或声明的方法，本质上讲，Filter是一种用来过滤不同浏览器的Hack类型

1. 下划线属性过滤器：当在一个属性前面增加了一个下划线后，由于符合标准的浏览器不能识别带有下划线的属性而忽略这个声明，但是在IE6及更低版本的浏览器中会继续解析这个规则
2. !important关键字过滤器，IE6及更低版本不能识别，可以利用IE6的这个bug作为过滤器来兼容IE6和其他标准浏览器。
3. *属性过滤器，当在一个属性前面添加了*后，该属性只能被IE7及以下版本浏览器识别，其他浏览器忽略，语法：选择符{ *属性：属性值；}

   element{
       min-height: value;
       _height: value;
   }
   
   /*   另一种实现 建议使用 */
   element{
       min-height: auto;
       height: auto!important;
       height: value;
   }  

常见CSS Bug及Hack

• IE5-8不支持opcity

  opacity {
   opacity: 0.4
   filter: alpha(opacity=60); /* for IE5-7 */
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/
  }

• 没办法定义1px左右的宽度容器

　  　解决：IE6 默认的行高造成的 ， 使用overflow:hidden; zoom:0.08; line-height:1px;

• 图片间隙，插入图片下方会产生约3像素的间隙

　　hack1: <img>转为块状元素

　　  hack2：将img设置vertical-align：top/middle/bottom;(只要不为baseline)

• 双倍浮向（双倍边距）块属性标签 float 后，又有横向的margin情况下，在ie6显示margin比设置的大

　　描述：当ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边边界加倍显示

　　  hack：给浮动元素添加声明：_display：inline；(_这个符号只有 ie6 会识别)

• 3像素问题

　　  使用 float 引起的 使用 dislpay:inline -3px

• 超链接 hover 点击后失效

　　  使用正确的书写顺序 link visited hover active

• 默认高度（IE6)

　　描述：在IE6及以下版本中，部分块元素拥有默认高度(低于16px高度）

　　   hack1：给元素添加声明：font-size：0；

　　　hack2：给元素添加声明：overflow：hidden;

• 百分比bug

　　描述：在IE6及以下的版本中在解析百分比时，会按四舍五入方式计算导致50%+50%>100%的情况

　　  hack：给右边的元素添加声明： clear: right;

• 表单元素高度及对齐方式不一致（IE，MOZ, C, O, S)

　　hack：给表单元素添加声明：float： left；或vertical-align：top;

　　  表单元素中按钮的解析是按怪异盒模型来解析的

　　　直接去掉表单控件的边框时用border：0；border：none；不能兼容ie7以下浏览器

• 鼠标指针bug

　　cursor属性的hand属性值只有IE浏览器识别，其他浏览器不识别该声明，cursor属性为pointer属性值IE6.0以上版本及其它内核浏览器都识别该声明

• 列表阶梯bug（IE6及更低）

　　bug1：在给ul的子元素中使用了float:left;父元素中没有设置浮动属性，li阶梯状效果。

　　  　　hack：给父元素设置浮动便能解决

　　  bug2：当给li里的a转成块元素，并设置了固定高度时，且给父元素写了浮动后在IE6及版本浏览器里会出现垂直显示

　　  　　hack：给a也设置左浮

• 浏览器默认的margin和padding不同。解决方案是加一个全局的 *{margin:0;padding:0;}来统一
• png24的图片在iE6浏览器上出现背景，解决方案是做成 PNG8
• 渐进识别的方式，从总体中逐渐排除局部。 首先，巧妙的使用“9”这一标记，将IE浏览器从所有情况中分离出来。 接着，再次使用“+”将 IE8 和 IE7、IE6 分离开来，这样IE8已经独立识别。 

  css .bb{ 
      background-color:#f1ee18;/*所有识别*/
      .background-color:#00deff9; /*IE6、7、8 识别*/ 
      +background-color:#a200ff;/*IE6、7 识别*/ 
      _background-color:#1e0bd1;/*IE6 识别*/ 
  }

• IE下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用 getAttribute()获取自定义属性; Firefox 下,只能使用 getAttribute()获取自定义属性解决方法:统一通过 getAttribute()获取自定义属性
• IE 下,even 对象有 x,y 属性,但是没有 pageX,pageY 属性; Firefox 下,event 对象有 pageX,pageY 属性,但是没有 x,y 属性
• Chrome中文界面下默认会将小于12px的文本强制按照12px显示, 可通过加入CSS属性 -webkit-text-size-adjust: none; 解决