探究IE7beta2的CSS兼容性

开发 前端
CSS兼容性有很多值得学习的地方,于是我研究了一下IE7beta2的CSS兼容性,这里和大家分享一下,希望对你的学习有所帮助。

本文向大家介绍一下IE7beta2的CSS兼容性问题,MS在推出了IE7beta2发生了一些变化,改进和变化会导致一些原来正常网页出现布局错误或者原来可以使用的Hack技巧不再可用。

IE7beta2的CSS兼容性

当IE7beta1推出的时候,我在第一时间对它作了个测试。当时发现它对CSS的支持几乎没有任何变化,着实失望了一阵。MS在最近推出了IE7beta2,这次有了不少新的改进和变化。但这些改进和变化会导致一些原来正常网页出现布局错误或者原来可以使用的Hack技巧不再可用。MSDN在年初的时候把这些可能产生的问题罗列给开发者(这是原文),这里我把其中比较主要的问题简单地描述一下,希望能对大家有所帮助。

  ◆注意,在IE7正版发布之前,以下提到所有内容都是有可能变化的。

盒模型变了,这恐怕是会让那些使用Web标准建设大型网站的开发者感到背脊发凉的变化,不过不用太担心,主要的变化是在盒模型对溢出(overflow)内容的处理方法。

  假设有一个100px宽100px高的盒子,在这个盒子里放一个200px宽200px高的图片。目前IE的正理方法是自动把盒子“撑大”到200px见方。而IE7beta2的处理方法和FF是一致的:盒子不变,溢出的部分在盒子外面被渲染。也就是说盒子的overflow值真正地使用了W3C的默认值“visible”。

  如果你现有的布局是依赖于IE的“自动撑开”,那么要小心,很可能会出现问题(特别是动态内容的网页)。

XML序言(prolog)可能会影响盒模型

  大家知道IE有两种渲染模式:QuirksMode和StrictMode。QuirksMode基本上是非标准的,包括盒模型在内,它的渲染方式与W3C的标准有些出入。而StrickMode基本上是标准的(反正都不是绝对标准也不是绝对不标准……)。IE6及以前版本会根据写在XHTML文档第一行(也只能是第一行)的DocType声明来选择渲染模式。如果发现了一个它能识别的DocType,比如XHTMLTransitional或者XHTMLStrict等等,它就使用StrictMode来渲染。其他所有情况下都使用QuirksMode。

  有些开发者为了显式地声明他们的XHTML文档是一个XML,会在文档的第一行(问题就在这里,它也必须在第一行)加上XML的序言(prolog)。比如:

  1. <?xmlversionxmlversion=\"1.0\"encoding=\"gb2312\"?>   
  2.  

虽然初衷是为了让文档更“标准”,但由于IE不认这行字,结果还是按QuirksMode来渲染。

  IE7beta2解决这个问题,它会跳过prolog来看检查DocType。所以可能会出现IE6及以下版本用QuirksMode渲染而IE7beta2用StrictMode渲染的情况。

  其实这个问题容易解决,在现有的环境下,把prolog直接删掉就行了,实在是没什么大的用处。当然想装作在使用XHTML,事实上还是想用QuirksMode的人可能得好好想个新办法了^_^

由于改进bug而失效的Hack技巧

*html
这是一个利用IEBug的Hack,如下的写法只有IE会解析其中的内容:

*html{...}*htmlbody{...}现在IEbeta2将和大部队一起把它们忽略掉。

◆下划线Hack

这也是一个利用IEBug的Hack,如下的写法只有IE会解析其中的内容:

  1. .myclass{  
  2. min-height:300px;  
  3. _height:300px;  
  4. }  
  5.  

现在IEbeta2将不再解析下划线开头的属性,但是会把它当作一个“用户自定义”属性。自定义属性并不能应用到表现上,但是它会存在于文档模型中,可以使用脚本来访问。(这个特性我还没有测试过)

◆/**/注释Hack

这是我最喜欢的Hack技巧之一了。如下的写法在StrictMode下面会对IE6透明(IE5.x是会解析的),但是现在IE7beta2将会解析它:

  1. .myclass{  
  2. height/**/:300px;  
  3. }  
  4.  

由于增强功能而失效的Hack技巧
原来IE不支持以下写法,现在可以了:

◆child选择符Hack

  1. html>body{  
  2. height:300px;  
  3. }相邻选择符Hack  
  4. head+body{  
  5. height:300px;  
  6. }相邻选择符和first-child伪类选择符  
  7. head:first-child+body{  
  8. height:300px;  
  9. }  
  10.  

这些都算不上什么坏消息,反正我从来不用这些Hack^_^

页面混乱解决方案

  在MSDN的那篇文章上给出了一些解决方案,从我的角度来看都是些治标不治本、隔靴搔痒的方案。要不用JS来做CSS的工作,要不只针对IE来载入特定的CSS。所以建议大家:等!一等IE7的正式版,在正式版出来之前,什么都有可能变。二等伟大的CSS社区的牛牛们找出更多的Hack技巧。IE7不可能做得和FF一模一样,也不可能和IE6一模一样,反正总会有点不一样的,就利用那点不一样的东西来做Hack。

  虽然用各种Hack是件很无奈的事情,但现实就是这样,我们在努力影响这个行业的同时只有好好适应它,所以私底下很希望能看到用中国人名字命名的Hack出现。

【编辑推荐】

  1. CSS2.0中最常用的18条技巧
  2. CSS层叠与继承用法手册
  3. DIV布局规范中CSS类及id命名方式
  4. 由浅入深学习CSS中margin属性用法
  5. 将XHTML+CSS页面转换为打印机页面技巧

 

责任编辑:佚名 来源: svn8.com
相关推荐

2022-03-01 17:24:33

iOS兼容性方案

2010-08-17 15:38:49

CSS兼容IE7IE8

2010-09-15 10:25:18

IE7IE8CSS兼容性

2010-08-30 09:35:35

IE6IE7Firefox

2010-08-20 13:22:21

IEFirefoxJavaScript

2009-02-19 13:59:00

2010-09-16 13:33:47

IE6IE7IE8

2010-08-17 15:26:38

IE7IE8CSS兼容性

2009-11-19 08:55:44

Windows 7网络兼容性

2010-08-20 11:01:10

IE7IE8CSS

2009-02-25 09:22:01

Windows 7Client Beta兼容性

2010-08-18 15:22:28

IE6IE7Firefox

2010-08-17 15:33:28

CSS兼容IE7IE8

2010-09-15 11:18:27

IE6IE7火狐

2009-03-07 09:49:07

Windows 7兼容性

2010-08-17 15:07:48

IE6IE7IE8

2010-08-20 09:25:11

IE6IE7IE8

2010-08-20 14:27:23

IE火狐CSS

2009-03-06 08:54:25

EngineeringWindows 7兼容性

2010-09-15 11:26:05

IE火狐CSS兼容性
点赞
收藏

51CTO技术栈公众号