CSS中一些常见的兼容性问题

CSS中一些兼容性问题就是浏览器兼容，而这些浏览器兼容问题主要是Ie和FF之间的争斗。

CSS hack中的一些事：

我们为了让页面形成统一的效果，要针对不同的浏览器或不同版本写出对应可解析的CSS样式，所以我们就把这个针对不同浏览器/版本而写CSS的过程叫做 CSS hack。

CSS hack主要有三种：IE条件注释法、CSS属性前缀法、选择器前缀法。

（1）IE条件注释法，即在正常代码之外添加判别IE浏览器或对应版本的条件注释，符合条件的浏览器或者版本号才回执行里边的代码。

1 <!--[if IE 8]>
2 <p>Welcome to Internet Explorer 8.</p>
3 <![endif]-->

(2)CSS属性前缀法，即是给css的属性添加前缀。比如 * 可以被IE6/IE7识别，但 _ 只能被IE6识别，IE6-IE10都可以识别 "\9"，IE6不能识别!important  FireFox不能识别 * _  \9

.type{
	color: #111; /* all */

	color: #222\9; /* IE */
	*color: #333; /* IE6/IE7 */
	_color: #444; /* IE6 */
	}

（3）选择器前缀法，顾名思义，就是给选择器加上前缀。

IE6可识别 *div{color:red;}
IE7可识别 *+div{color:red;}

　下面来说一下主要的兼容性问题：

（1）最主要也是最常见的，就是浏览器对标签的默认支持不同，所以我们要统一，就要进行CSS reset . 最简单的初始化方法是 *{margin:0; padding:0;} 但不推荐，而且它也并不完善，我们一般推荐淘宝的样式初始化。

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:; padding:; }
    body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
    h1, h2, h3, h4, h5, h6{ font-size:100%; }
    address, cite, dfn, em, var { font-style:normal; }
    code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
    small{ font-size:12px; }
    ul, ol { list-style:none; }
    a { text-decoration:none; }
    a:hover { text-decoration:underline; }
    sup { vertical-align:text-top; }
    sub{ vertical-align:text-bottom; }
    legend { color:#000; }
    fieldset, img { border:; }
    button, input, select, textarea { font-size:100%; }
    table { border-collapse:collapse; border-spacing:; }

(2)IE6双边距bug: 块属性元素如果添加浮动之后，会产生双倍外边距bug。

解决方式：

给float元素添加display：inline-block 即可正常显示

(3)上下margin重合问题，相邻的两个div margin-left margin-right 不会重合，但相邻的margin-top margin-bottom会重合。

解决方式：

上下两个尽量不要同时使用margin—top和margin-bottom。

(4)超链接访问样式的问题，伪类要按照一定的顺序书写：

a:link{}  a:visited{}  a:hover{}  a:active{}

(5)chrome下默认会将小于12px的文本强制按照12px来解析。解决办法是给其添加属性：　

-webkit-text-size-adjust: none; 

(6)png24位的图片在IE6下面会出现北京，所以最好还是使用png8格式的。　

(7)IE盒模型和W3C标准盒模型：

IE盒模型：margin+border+padding+content；

W3C盒模型：margin+border+padding+content；

从上面的表达式看不出来IE盒模型与W3C盒模型有什么不同，例如一个盒子模型如下：margin:20px,border:10px,padding:10px;width:200px;height:50px;

如果用w3c盒子模型解释，那么这个盒子模型占用的：

宽度为：20*2+10*2+10*2+200=280px;

高度：20*2+10*2+20*2+50=130px;

盒子的实际宽度大小为:10*2+10*2+200=240px;

实际高度：10*2+10*2+50=90px;

用ie的盒子模型解释 ：

盒子在网页中占据的大小为20*2+200=240px; 高：20*2+50=90px;

盒子的实际大小为：宽度:200px, 高度:50px;

我们常常理解的盒子模型是w3c这样的盒子模型

(8)IE6div高度不能小于10px：

解决方式：

<div style="height:2px;overflow:hidden;background:#000000;width:778px;"></div>

<div style="height:2px;font-size:2px;background:#000000;width:778px;">&nbps;</div>

希望大家能够理解，也希望自己能够加深一下记忆。