internet explorer 7中的层叠样式表兼容性--.

《internet explorer 7中的层叠样式表兼容性--.》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、InternetExplorer7中的层叠样式表兼容性>>.简介InterExplorer7包含了许多有关于层叠样式表（CSS）解析与呈现的改进。这些改进意在提高InterExplorer解释层叠样式表的一致性，以达到L页面开始部分的一个声明决定。在quirks模式中，我们可以确保兼容性，所以已经存在的内容可以像在以前的IE版本中一样被呈现。而在strict模式中，我们的工作是向oreEffectively找到。影响CSSBoxModel的XMLProlog问题XMLprolog对正在使用的XML版本进行说明，当与XHTML联合时常被使用。正向上面解释的，我们在IE6

2、中引入了一个开关来在quirks模式与strict模式间进行切换。这个开关必须放在页面的第一行。不幸的是，XMLprolog也需要这个位置，而且大多数使用XMLprolog的会将它放在strict模式开关前面。这会导致IE6忽略的意图并且IE6会采用quirks模式来呈现页面，而不是strict模式。我们在IE7中修复了这个问题。现在，可以将XMLprolog紧跟strict模式开关来正确的显示XHTML页面。可是一些页面在呈现它们的内容时，默认认为IE不处在strict模式（即使IE应该符合HTMLspec）。由于XMLprolog导致的呈现问题很容易判别：打开页面

3、的查看源文件，找到最前面的两行。如果看到XMLprolog和一个<!DOCTYPE>限定，并且页面呈现时出现问题，那么大多数情况下需要更新页面内容了。BoxModel的改变在IE7中，为了适应CSS2.1boxmodel，我们修改了溢出的行为。溢出是一种方法，用来描述当一个块元素的内容溢出它的区域时，这些内容是否被省略。默认是可见的。这个值（可见）表明内容不被省略，也就是，它有可能呈现在区域以外。过去的IE不支持这个行为。内容总是需要适合区域的大小。想象一个宽和高都是100px的区域，如果内容小于100px，那么没有问题。如果内容超过了尺寸，我们需要自动增长区域

4、大小来适合内容。要想演示这个行为，请看下面的代码示例。<styletype="text/css">div{argin-top:50px;margin-left:50px;border:thindashedblack}cite{display:block;text-align:right;border:none}p{margin:0;}</style><div><blockquote><p>sometextlongenoughtomakeitinteresting.</p><cite>-anonymous</cite>&l

5、t;/blockquote></div>下面的图片说明了这个示例代码在IE6中的呈现情况。与其对比，下面的图片说明了同样的代码在IE7中的呈现情况。12下一页[这篇文章来自..，]正如你所见，<blockquote>的内容在呈现时超出了其父标签<div>（红色边框的区域）的边界。CSSFilters虽然像CSS一样的标准已经存在，但是并不保证所有的浏览器用同样的方式呈现页面。这些标准可能含有未经定义的部分，并不是所有的组件等会被所有的浏览器去执行，并且已知的执行也可能存在问题。CSS标准并不提供一个方法去指定一个特定的浏览器版本，所以网络开发者社区开

6、发了CSSfilter（也被称作”CSShacks”）。这些filter利用浏览器的问题或者未执行的特性来隐藏针对特殊浏览器的CSS样式规则。当我们修复了这些问题并且改进了CSS支持后，一些CSSfilter将不再可用。如果你使用这些filters，你应该了解它们的效果。这个可以帮助你做出针对以后版本的InterExplorer和其它浏览器的更有效的并且适应改进后的CSS的设计。在IE7中，我们修改了许多潜在解析错误，这些错误有可能会阻止下面的filter在以前的IE版本中正常工作。如果你的页面中包含这些filter，请去除或者更换它们。*HTMLfilter这个CS

7、Sfilter基于一个解析错误。它被用于显示排除内容。这些内容将被InterExplorer7和以后的版本忽略。/*Thefollol{}*htmlbody{}*html.foo{}下划线filter这个CSSfilter基于一个解析错误。它被用来显示被排除的属性。这个内容现在被InterExplorer以及之后的版本认为是一个自定义属性。自定义属性意味着它仍然可以使用，但是并不默认就拥有一个值。/*Thefolloin-heighttobroproperty(noheightyclass{min-height:300px;_height:300px