浏览器兼容性问题

很多浏览器兼容性问题都是因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。

兼容性问题 在IE6,7下

1、html5标签的兼容    动态创建元素  然后变成块级元素
html5shiv：解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题。
respond.min:让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。
<!--[if lt IE 9]>
　<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
　<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]—>
2、元素浮动之后,能设置宽高的元素就给宽高,如果需要宽度是内容撑开,就给它里边的块元素加上浮动
3、第一块元素浮动,第二块元素使用margin,在IE6下会出现间隙问题  采用浮动解决
4、在IE6下子元素超出父级宽高,会把父级的宽高撑开        最好不要让子级宽高超过父级
5、p包含块元素嵌套规则    块元素不能在包含块元素  p h1~h6 dt  产生额外元素
嵌套规则：
  a、块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。
  b、块级元素不能放在p里面。
  c、有几个特殊的块级元素只能包含内联元素，不能包含块级元素。如h1,h2,h3,h4,h5,h6,p,dt
  d、li内可以包含div
6、margin  合并(尽量使用单方向的margin值)  和  传递(加边框  出发bfc,haslayout)
7、display:inline-block;    在IE6下无效    {*display:inline;*zoom:1;}
8、IE6下最小高度18px   {*overflow:hidden;}
9、IE6,IE7下margin双边距问题   当元素浮动后就会产生margin双边距问题    {*display:inline;}
10、li里面元素都浮动,在IE6,IE7下会产生4px间隙问题    给li加{*vertical:top;}
11、两个浮动元素中间有注释或者有内联元素 并且和父级宽高不超过3px时,在IE6下文字自溢出
    解决:   避免两个浮动元素之间出现注释    与父级宽度相差3px以上
12、IE6,IE7 当子级的position:relative时,父级overflow:hidden包不住子级
    解决:   给父级也添加position:relative
13、IE6下绝对定位元素父级宽高是奇数,绝对定位元素的right和bottom会有1px偏差
    解决:   避免给父级宽高设置奇数
14、IE6下绝对定位元素和浮动元素并列时,绝对定位元素消失
    解决:   给浮动元素加一个父级  不要处于同级即可
15、IE6,IE7下input缝隙问题
    解决:   给input元素添加浮动   input{*float:left;}
16、IE6下输入类型表单控件背景被文字挤走的问题
    解决:   给背景图片加背景图片固定属性 background-attachment:fixed
17、IE6不支持PNG24问题
    解决:  js插件 DD_belatedPNG_0.0.8a-min.js  (不能处理body上png24)
    css  background:url(../images/button1.png) no-repeat;
        _background:none;
        _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/button1.png");
18、IE6下margin负值,无效的时候,添加相对定位即可,position:relative解决.
19、文字与图片垂直居中对齐方法
    解决:  为图片与文字的共同父元素所有的后代元素定义*{vertical-align:middle};例如:
          <p>我要的坚强<img src="i/image.gif" /></p>
          只需定义p*{vertical-align:middle}即可使文字与图片同行垂直居中.

其他

• img的边缘空白间隙3px问题 给img加vertical-align或者display:block
• 用a标签包裹起来的img图片,在ie中有蓝色边框存在 使用 border:none或0 清除超链接图片的蓝色边框