IE7beta2的CSS兼容性_浏览器兼容教程
教程Tag：暂无Tag,欢迎添加,赚取U币!
当IE7 beta1推出的时候，我在第一时间对它作了个测试。当时发现它对CSS的支持几乎没有任何变化，着实失望了一阵。MS在最近推出了IE7 beta2，这次有了不少新的改进和变化。但这些改进和变化会导致一些原来正常网页出现布局错误或者原来可以使用的Hack技巧不再可用。MSDN在年初的时候把这些可能产生的问题罗列给开发者（这是原文），这里我把其中比较主要的问题简单地描述一下，希望能对大家有所帮助。
注重，在IE7正版发布之前，以下提到所有内容都是有可能变化的。
盒模型变了！！！
这恐怕是会让那些使用Web标准建设大型网站的开发者感到背脊发凉的变化，不过不用太担心，主要的变化是在盒模型对溢出（overflow）内容的处理方法。
假设有一个100px宽100px高的盒子，在这个盒子里放一个200px宽200px高的图片。目前IE的正理方法是自动把盒子“撑大”到200px见方。而IE7 beta2的处理方法和FF是一致的：盒子不变，溢出的部分在盒子外面被渲染。也就是说盒子的overflow值真正地使用了W3C的默认值“visible”。
假如你现有的布局是依靠于IE的“自动撑开”，那么要小心，很可能会出现问题（非凡是动态内容的网页）。
XML序言（prolog）可能会影响盒模型
Oh，My GOD！又是盒模型！
大家知道IE有两种渲染模式：Quirks Mode和Strict Mode。Quirks Mode基本上是非标准的，包括盒模型在内，它的渲染方式与W3C的标准有些出入。而Strick Mode基本上是标准的（反正都不是绝对标准也不是绝对不标准……）。IE6及以前版本会根据写在XHTML文档第一行（也只能是第一行）的DocType声明来选择渲染模式。假如发现了一个它能识别的DocType，比如XHTML Transitional或者XHTML Strict等等，它就使用Strict Mode来渲染。其他所有情况下都使用Quirks Mode。
有些开发者为了显式地声明他们的XHTML文档是一个XML，会在文档的第一行（问题就在这里，它也必须在第一行）加上XML的序言（prolog）。比如：
<?xml version="1.0" encoding="gb2312"?> 虽然初衷是为了让文档更“标准”，但由于IE不认这行字，结果还是按Quirks Mode来渲染。
IE7 beta2解决这个问题，它会跳过prolog来看检查DocType。所以可能会出现IE6及以下版本用Quirks Mode渲染而IE7 beta2用Strict Mode渲染的情况。
其实这个问题轻易解决，在现有的环境下，把prolog直接删掉就行了，实在是没什么大的用处。当然想装作在使用XHTML，事实上还是想用Quirks Mode的人可能得好好想个新办法了^_^
由于改进bug而失效的Hack技巧
* html
这是一个利用IE Bug的Hack，如下的写法只有IE会解析其中的内容：
* html{...}* html body{...}现在IE beta2将和大部队一起把它们忽略掉。
下划线Hack
这也是一个利用IE Bug的Hack，如下的写法只有IE会解析其中的内容：
.myclass{
min-height:300px;
_height:300px;
}现在IE beta2将不再解析下划线开头的属性，但是会把它当作一个“用户自定义”属性。自定义属性并不能应用到表现上，但是它会存在于文档模型中，可以使用脚本来访问。（这个特性我还没有测试过）
/**/注释Hack
这是我最喜欢的Hack技巧之一了。如下的写法在Strict Mode下面会对IE6透明（IE5.x是会解析的），但是现在IE7 beta2将会解析它：
.myclass{
height/**/:300px;
}由于增强功能而失效的Hack技巧
原来IE不支持以下写法，现在可以了：
child选择符Hack
html > body{
height:300px;
}相邻选择符Hack
head body{
height:300px;
}相邻选择符和first-child伪类选择符
head:first-child body{
height:300px;
}这些都算不上什么坏消息，反正我从来不用这些Hack^_^
俺的页面乱咧，咋办？
在MSDN的那篇文章上给出了一些解决方案，从我的角度来看都是些治标不治本、隔靴搔痒的方案。要不用JS来做CSS的工作，要不只针对IE来载入特定的CSS。所以建议大家：等！一等IE7的正式版，在正式版出来之前，什么都有可能变。二等伟大的CSS社区的牛牛们找出更多的Hack技巧。IE7不可能做得和FF一模一样，也不可能和IE6一模一样，反正总会有点不一样的，就利用那点不一样的东西来做Hack。
虽然用各种Hack是件很无奈的事情，但现实就是这样，我们在努力影响这个行业的同时只有好好适应它，所以私底下很希望能看到用中国人名字命名的Hack出现。
Fight！
注重，在IE7正版发布之前，以下提到所有内容都是有可能变化的。
盒模型变了！！！
这恐怕是会让那些使用Web标准建设大型网站的开发者感到背脊发凉的变化，不过不用太担心，主要的变化是在盒模型对溢出（overflow）内容的处理方法。
假设有一个100px宽100px高的盒子，在这个盒子里放一个200px宽200px高的图片。目前IE的正理方法是自动把盒子“撑大”到200px见方。而IE7 beta2的处理方法和FF是一致的：盒子不变，溢出的部分在盒子外面被渲染。也就是说盒子的overflow值真正地使用了W3C的默认值“visible”。
假如你现有的布局是依靠于IE的“自动撑开”，那么要小心，很可能会出现问题（非凡是动态内容的网页）。
XML序言（prolog）可能会影响盒模型
Oh，My GOD！又是盒模型！
大家知道IE有两种渲染模式：Quirks Mode和Strict Mode。Quirks Mode基本上是非标准的，包括盒模型在内，它的渲染方式与W3C的标准有些出入。而Strick Mode基本上是标准的（反正都不是绝对标准也不是绝对不标准……）。IE6及以前版本会根据写在XHTML文档第一行（也只能是第一行）的DocType声明来选择渲染模式。假如发现了一个它能识别的DocType，比如XHTML Transitional或者XHTML Strict等等，它就使用Strict Mode来渲染。其他所有情况下都使用Quirks Mode。
有些开发者为了显式地声明他们的XHTML文档是一个XML，会在文档的第一行（问题就在这里，它也必须在第一行）加上XML的序言（prolog）。比如：
<?xml version="1.0" encoding="gb2312"?> 虽然初衷是为了让文档更“标准”，但由于IE不认这行字，结果还是按Quirks Mode来渲染。
IE7 beta2解决这个问题，它会跳过prolog来看检查DocType。所以可能会出现IE6及以下版本用Quirks Mode渲染而IE7 beta2用Strict Mode渲染的情况。
其实这个问题轻易解决，在现有的环境下，把prolog直接删掉就行了，实在是没什么大的用处。当然想装作在使用XHTML，事实上还是想用Quirks Mode的人可能得好好想个新办法了^_^
由于改进bug而失效的Hack技巧
* html
这是一个利用IE Bug的Hack，如下的写法只有IE会解析其中的内容：
* html{...}* html body{...}现在IE beta2将和大部队一起把它们忽略掉。
下划线Hack
这也是一个利用IE Bug的Hack，如下的写法只有IE会解析其中的内容：
.myclass{
min-height:300px;
_height:300px;
}现在IE beta2将不再解析下划线开头的属性，但是会把它当作一个“用户自定义”属性。自定义属性并不能应用到表现上，但是它会存在于文档模型中，可以使用脚本来访问。（这个特性我还没有测试过）
/**/注释Hack
这是我最喜欢的Hack技巧之一了。如下的写法在Strict Mode下面会对IE6透明（IE5.x是会解析的），但是现在IE7 beta2将会解析它：
.myclass{
height/**/:300px;
}由于增强功能而失效的Hack技巧
原来IE不支持以下写法，现在可以了：
child选择符Hack
html > body{
height:300px;
}相邻选择符Hack
head body{
height:300px;
}相邻选择符和first-child伪类选择符
head:first-child body{
height:300px;
}这些都算不上什么坏消息，反正我从来不用这些Hack^_^
俺的页面乱咧，咋办？
在MSDN的那篇文章上给出了一些解决方案，从我的角度来看都是些治标不治本、隔靴搔痒的方案。要不用JS来做CSS的工作，要不只针对IE来载入特定的CSS。所以建议大家：等！一等IE7的正式版，在正式版出来之前，什么都有可能变。二等伟大的CSS社区的牛牛们找出更多的Hack技巧。IE7不可能做得和FF一模一样，也不可能和IE6一模一样，反正总会有点不一样的，就利用那点不一样的东西来做Hack。
虽然用各种Hack是件很无奈的事情，但现实就是这样，我们在努力影响这个行业的同时只有好好适应它，所以私底下很希望能看到用中国人名字命名的Hack出现。
Fight！
相关浏览器兼容教程：
- 相关链接：
- 教程说明：
浏览器兼容教程-IE7beta2的CSS兼容性
。