20160321-20160325 浏览器兼容性问题

chrome:

1. input：focus 设置Border样式无效，有一层绿色外围框包裹；使用outline:none解决

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
注释：轮廓线不会占据空间，也不一定是矩形。
outline 简写属性在一个声明中设置所有的轮廓属性。
可以按顺序设置如下属性：
outline-color
outline-style
outline-width

IE

1.      Inline-block无法被IE6 IE7识别，ie6，7中的inline元素有个特殊的情况，就是触发了ie的hasLayout属性以后就拥有了layout。此时inline元素的表现和标准浏览器里面的inline-block元素基本相同。用ie的私有属性zoom来触发hasLayout。

加了个zoom:1来触发haslayout;zoom的值设置为除了auto外的任何值都会触发haslayout，之所以经常用zoom:1;是因为zoom这个属性本身是ie的缩放属性，设置为其他值会导致元素在ie下变形，设置为1既是保持原形不缩放。

兼容方案：

display:inline-block;   /* firefox等标准浏览器识别*/

*display:inline;     /* 只有ie6和ie7识别*/

zoom:1;         /* 触发ie6和ie7下的haslayout */

 让标准浏览器识别display:inline-block;让ie6，7识别display:inline;来覆盖上面的display:inline-block;     然后通过zoom:1;来触发haslayout让inline元素在ie中表 现得和inline-block元素一样。

2.       Input光标

a)       位置错位：Chrome ff显示居中效果，但IE在笔记本上显示是在Input的下方，宽屏显示器先显示在下方，后自动跳到中间。通过修改line-height和height相同解决

b)       光标高度问题：chrome下光标跟input的height一样高，而IE下光标跟文字的大小一致。input的height设定一个较小的高度，然后用padding去填充，解决。

3.       浮动元素占两行

<span class="g14">联系QQ</span><spanclass="error right"></span>

当非float的元素和float的元素在一起的时候，如果非float元素在先，那么float的元素将被排斥。span是float:right，但是你文本还是float:none 如果要让两者占据同一行: 要么你把span先于文本显示：<span class=”error right”></span> <span class=”g14”>联系QQ</span>（示例第3行） 要么把文本也设成float：<spanstyle="float: left">新闻新闻新闻</span>

4.       List-style:decimal失效

a)       使用list-style:decimal inside解决

浮动元素的父级高度适应方法：

1） 向父div的末尾再插入一个额外的标签，并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，但需要添加额外的而且通常是无语义的标签。这种方法是W3C推荐的方法。<div style=”clear:both”></div>

2）使用after伪类（ie6/7不支持after伪类）：这种方法就是对父容器使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就  是添加一个“点”，因为它比较小不太引人注意。然后我们再利用它来清除浮动（闭合浮动元素），并隐藏这个内容

{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}

3） 在父div中使用overflow属性，并设置为hidden或者auto，可以在标准兼容浏览器中闭合（清除）浮动元素，为了兼容IE6可以写成如下形式Overflow:hidden;zoom:1;

4） 浮动父元素，float-in-float：这种做法就是让父容器也浮动，这利用到了浮动元素的一个特性——浮动元素会闭合浮动元素。这种方式在IE和标准兼容浏览器中都有较好的效果，但在实际编写中，父div不是随意就可浮动的，有可能造成更多问题，因此一般不采用此法。