前端浏览器兼容问题部分整理

从浏览器内核的角度 来看，浏览器兼容性问题可分为以下三类：

        1. 渲染相关：和样式相关的问题，即体现在布局效果上的问题。

        2. 脚本相关：和脚本相关的问题，包括JavaScript和DOM、BOM方面的问题。对于某些浏览器的功能方面的特性，也属于这一类。

        3. 其他类别：除以上两类问题外的功能性问题，一般是浏览器自身提供的功能，在内核层之上的。

造成浏览器兼容性问题的根本原因就是浏览器各浏览器使用了不同的内核，并且它们处理同一件事情的时候思路不同。

造成浏览器兼容性问题的常见原因则是设计师写出了不规范的代码，不规范的代码会使不兼容现象更加突出

----------------text-align:center的兼容性问题-----------------------------

在W3C CSS2.1规范第16.2节 对text-align 有详细地描述：
------------------------------------------
值： left | right | center | justify | inherit
初始值：匿名值，由'direction'的值而定，如果'direction'为'ltr'则为'left'，如果'direction'为'rtl'则为'right'。
应用于: 块级元素，表格单元格，行内块元素
继承性: 是
计算后的值：初始值或指定值
------------------------------------------
这个特性描述了如何使一个块元素的行内内容对齐。
注意一点，标准里说这个属性是用来对齐行内内容的，所以，不应该对块级内容起作用。
解释一下，行内内容是说由行内元素组成的内容，行内元素大家都知道吧，比如 SPAN 元素，IFRAME元素和元素样式的　‘display : inline’ 的都是行内元素；块级内容跟则是由块级元素构成，DIV 是最常用的块级元素。块级元素和行内元素的区别是，块级元素会占一行显示，而行内元素可以在一行并排显示。
这样，我们对这个特性的认识应该就清楚了。但是，问题来了，虽然标准里这么规定，那么是不是所有浏览器都遵守呢？答案是否定的。猜猜是哪个浏览器这么特立独行啊？ IE！！    IE6/7及IE8混杂模式中，text- align:center可以使块级元素也居中对齐。其他浏览器中，text-align:center仅作用于行内内容上。
解决这个问题比较好的方式，就是为所有需要相对父容器居中对齐的块级元素设置“margin-left:auto; margin-right:auto”。但这个方式 IE6/IE7/IE8的混杂模式中不支持，所以还要设置父容器的 "text-align:center;"。
若居中对齐的子元素内的行内内容不需要居中对齐，则还需要为其设置“text-align:left”

<style>   * { font-family:Consolas,Verdana,Arial; font-size:12px; }   div, center { border:3px solid dimgray; padding:2px; }   span { background:lightgrey; }</style><div style="width:200px; text-align:center;">   <div style="width:100px; margin:0 auto; text-align:left;">       <span>text</span>   </div></div>

转自：前端开发博客 (http://caibaojian.com/337.html)

常见兼容性问题
1.png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.

2.浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一

3.IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。

4.浮动ie产生的双倍距离（IE6双边距问题：在IE6下，如果对元素设置了浮动，同时又设置了margin-left或margin-right，margin值会加倍。）
  #box{ float:left; width:10px; margin:0 0 0 100px;} 
  这种情况之下IE会产生200px的距离，解决方案是在float的标签样式控制中加入 ——display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)

  请看http://blog.csdn.net/lzy_1515/article/details/4768336  点击打开链接  有详解

5.超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:
L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

6.上下margin重合问题
ie和ff都存在，相邻的两个div的margin-left和margin-right不会重合，但是margin-top和margin-bottom却会发生重合。
解决方法，养成良好的代码编写习惯，同时采用margin-top或者同时采用margin-bottom。