HTML5学习_day10(3)--兼容性概念

浏览器兼容性概念

1.市面上浏览器有哪些？

IE6,IE7,IE8，谷歌浏览器，火狐浏览器

至于我们常用的浏览器的遨游浏览器，QQ,360采用的是计算机系统自带的浏览器内核，所有只要兼容以上几类浏览器即可兼容这些浏览器

2.CSS HACK?

CSS hack是通过在CSS样式中加入一些特殊符号，让不同的浏览器识别不同的符号（什么浏览器识别什么样的符号都是有自己一套标准），以达到应用不同的css样式的目的

例如

<span style="white-space:pre">		</span><style type="text/css">
			*{
				width: 300px;
				_width:200px;//只有IE6能识别这个
			}
		</style>

在IE6环境下测试下测试，最终显示的宽度为200px,_width只有IE6能识别。

css hack还可以用来解决有些属性在不同浏览器显示不一致的问题。

<span style="white-space:pre">		</span><style type="text/css">
			*{
			margin-left: 20px;//这个在IE6下显示的是双倍距离40px,而不是我们想要的20px
			_margin_left:20px
			}
		</style>

css hack分类

1.属性级hack 比如IE6能识别"_"和"*"，IE7能识别"*",而火狐两者都不能识别。

2.选择器级hack，例如IE6能识别*html{};IE7能识别*+html{}或者*:first-child{}

html{//所有浏览器都能识别}

*html{只有IE6能识别}

3.IE条件注释HACK

这个是微软从IE5开始提供的一套非逻辑语言

例如:

<!-[if IE]><!-代码-><![endif]->

注意：条件注释只有在IE条件下才能正常执行，在非IE下会当做注释而忽略掉，我们可以通过注释来载入不同注释来载入不同的CSS，JS，HTML和服务器代码。

属性级hack具体表现：

color:red；所有浏览器都能够识别

_color:red；只有IE6能识别

*color:red;只有IE6，IE7能识别

+color:red;只有IE6,IE7识别

*+color:red;只有IE6,IE7能识别

[color:red;只有IE6,IE7能识别

color:red\9;只有IE6,IE7,IE8,IE9能识别

color:red\9\0;只有IE8,IE9能识别

color:red !important;只有IE6识别不出来，其他都可以

css选择器级hack

*html #demo{color:red;};只有IE6能识别

*+html #demo{color:red;};只有IE7能识别

body：nth-of-type(1) #demo{};IE9+,FF3.5+,谷歌浏览器等都能识别

head:first-child+baody #IE7,FF+等都能识别

:root #demo()只有IE9能识别出来

IE条件注释hack

<![if IE]>此处只有IE可见<![endif]-->

<![if IE 6]>此处只有IE6可见<![endif]-->

<![if IE 7]>此处只有IE7可见<![endif]-->

<![if !IE 6>非IE6的浏览器可见<![endif]-->

<![if gt IE 6>此处了除了IE6以上版本可见<![endif]-->

<![if lt IE 8>此处了小于IE8以上版本可见<![endif]-->

<![if !IE>非IE浏览器可见<![endif]-->