精彩专题推荐:建站之入门课 建站之必修课 建站之关键课 网站价值所在 流量提高专题 css+div 标准 个人网站打造全过程
返回建站学首页
导航:
建站首页 | 网站设计 | 网站开发 | 网站运营 | 网页软件 | 建站指南 | 搜索优化 | 图像处理 | 视频教程 | 书籍教程 | 建站专题
当前位置:首页>网站设计>css教程>正文

Internet Explorer 7中的层叠样式表兼容性


来源: 时间:07-02-16 点击: 点击这里收藏本文

简介

Internet Explorer 7包含了许多有关于层叠样式表(CSS)解析与呈现的改进。这些改进意在提高Internet Explorer解释层叠样式表的一致性,以达到W3C的推荐的标准,同时为开发者提供一个可以依赖的功能集合。

在某些情况下,当使用与IE6不兼容的方式来呈现现有的内容时,这些改变可能会产生影响。这种现象常见于在IE7中将元素移动到纸张的不同区域或者出现重叠内容时。这些问题通常是由于为了解决在IE6的strict模式下出现的小错误,而使用了特殊的CSS内容(例如常见的”hacks”或者filters)而造成的。在这篇文章中我们将讨论为什么因为CSS的升级会导致页面被破坏以及去解决导致这些结果的问题的最好方法。

 

认真地考虑兼容性

在Internet Explorer团队中,我们认为在推出一个可供开发人员构建优秀解决方案的平台时,兼容性是很重要的一部分。我们需要在新的版本中继续显示已经存在的内容,而同时还要增加和改进新的功能。为了实现这个表面看上去很矛盾的目标,我们参考了quirks and strict mode。IE6中引入了对strict模式的支持,这个内容被HTML页面开始部分的一个声明决定。在quirks模式中,我们可以确保兼容性,所以已经存在的内容可以像在以前的IE版本中一样被呈现。而在strict模式中,我们的工作是向W3C推荐的方向去改进一致性,在这个过程中,包含了有可能影响现有内容的改变。

在Internet Explorer6中出现的和CSS解析与显示相关的许多问题在很多网站上都有很好的文档来说明,例如www.quirksmode.orgwww.positioniseverything.net

在IE中使用CSS的情况下,我们相信我们修复出现在IE6 strict模式中的问题是正确的选择,即使这会导致在页面呈现上发生一些改变。

针对IE7中的问题页面

如果当一个页面在Internet Explorer7中呈现时不同于以前版本的IE,第一步要做的就是诊断错误的原因,以便我们可以快速找到有效的解决办法。

User Agent Strings以及浏览器检测

在着眼于IE7中的CSS的带来的影响之前,我们应该首先排除一个常见的兼容性问题。一些站点基于用来访问它们的浏览器的类型和版本来提供不同的内容,这些站点不知道将被IE7访问。当检测User Agent String时会出现这个问题,更多的细节可以在Detecting Internet Explorer More Effectively找到。

影响CSS Box Model的XML Prolog问题

XML prolog对正在使用的XML版本进行说明,当与XHTML联合时常被使用。正向上面解释的,我们在IE6中引入了一个开关来在quirks模式与strict模式间进行切换。这个开关必须放在页面的第一行。不幸的是,XML prolog也需要这个位置,而且大多数使用XML prolog的作者会将它放在strict模式开关前面。这会导致IE6忽略作者的意图并且IE6会采用quirks模式来呈现页面,而不是strict模式。我们在IE7中修复了这个问题。现在,可以将XML prolog紧跟strict模式开关来正确的显示XHTML页面。可是一些页面在呈现它们的内容时,默认认为IE不处在strict模式(即使IE应该符合HTML spec)。由于XML prolog导致的呈现问题很容易判别:打开页面的查看源文件,找到最前面的两行。如果看到XML prolog和一个<!DOCTYPE>限定,并且页面呈现时出现问题,那么大多数情况下作者需要更新页面内容了。

Box Model的改变

在IE7中,为了适应CSS2.1 box model,我们修改了溢出的行为。溢出是一种方法,用来描述当一个块元素的内容溢出它的区域时,这些内容是否被省略。默认是可见的。这个值(可见)表明内容不被省略,也就是,它有可能呈现在区域以外。过去的IE不支持这个行为。内容总是需要适合区域的大小。想象一个宽和高都是100px的区域,如果内容小于100px,那么没有问题。如果内容超过了尺寸,我们需要自动增长区域大小来适合内容。要想演示这个行为,请看下面的代码示例。

<style type="text/css"> div { width : 100px; height: 100px; border: thin solid red;} blockquote { width: 125px; height: 100px; margin-top: 50px; margin-left: 50px; border: thin dashed black} cite { display: block; text-align: right; border: none} p { margin: 0;} </style> <div> <blockquote> <p>some text long enough to make it interesting.</p> <cite>- anonymous</cite> </blockquote> </div>

下面的图片说明了这个示例代码在IE6中的呈现情况。


 

与其对比,下面的图片说明了同样的代码在IE7中的呈现情况。


 

正如你所见,<blockquote>的内容在呈现时超出了其父标签<div>(红色边框的区域)的边界。

CSS Filters

虽然像CSS一样的标准已经存在,但是并不保证所有的浏览器用同样的方式呈现页面。这些标准可能含有未经定义的部分,并不是所有的组件等会被所有的浏览器去执行,并且已知的执行也可能存在问题。CSS标准并不提供一个方法去指定一个特定的浏览器版本,所以网络开发者社区开发了CSS filter(也被称作”CSS hacks”)。这些filter利用浏览器的问题或者未执行的特性来隐藏针对特殊浏览器的CSS样式规则。当我们修复了这些问题并且改进了CSS支持后,一些CSS filter将不再可用。

如果你使用这些filters,你应该了解它们的效果。这个可以帮助你做出针对以后版本的Internet Explorer和其它浏览器的更有效的并且适应改进后的CSS的设计。

在IE7中,我们修改了许多潜在解析错误,这些错误有可能会阻止下面的filter在以前的IE版本中正常工作。如果你的页面中包含这些filter,请去除或者更换它们。

*HTML filter

这个CSS filter基于一个解析错误。它被用于显示排除内容。这些内容将被Internet Explorer7和以后的版本忽略。

/* The following rules used to apply only to IE but now get ignored by IE7 and higher */ * html{ } * html body{ } * html .foo{ }

下划线filter

这个CSS filter基于一个解析错误。它被用来显示被排除的属性。这个内容现在被Internet Explorer以及之后的版本认为是一个自定义属性。自定义属性意味着它仍然可以使用,但是并不默认就拥有一个值。

/* The following rule used to apply min-height to browser who understand this property and height to IE. In IE7, _height will be treated as a custom property (no height will be applied) */ .myclass { min-height: 300px; _height: 300px; ... }

/**/注释filter

这个CSS filter基于一个解析错误。它被用来在strict模式下隐藏属性(这个filter在quirk模式下不起作用)。在Internet Explorer7中,这个属性可以被解析和使用。

/* The following rule used to hide the height property to Internet Explorer. In IE7, the value will be applied */ .myclass { height/**/: 300px; ... }

"html > body" 子节点 filter

这个CSS filter基于Internet Explorer中一个以前的未被执行的特性。它被用来隐藏声明排除。从版本7开始,Internet Explorer可以在声明中使用属性。

注意:当被用来检测浏览器或者浏览器的版本时,依赖子节点的CSS样式规则仅被认为是CSS filter。

/* The following rule used to hide the height property to Internet Explorer. In IE7, the value will be applied */ html > body { height: 300px; ... }

"head + body" 相邻节点 filter

这个CSS filter基于Internet Explorer中一个以前的非未被执行的特性。它被用来隐藏声明排除。从版本7开始,Internet Explorer可以在声明中使用属性。

注意:当被用来检测浏览器或者浏览器的版本时,依赖相邻节点的CSS样式规则仅被认为是CSS filter。

9 7 3 1 2 4 8 :

  把此文章收藏到:          
广而告之
文章搜索
  • Google JZxue.Com

关于我们 | 联系我们 | 友情链接 | 网站地图
Copyright © 2005 - 2006 建站学 All rights reserved.