Internet Explorer 7中的层叠样式表兼容性
来源: 时间:07-02-16 点击: 点击这里收藏本文
/* The following rule used to hide the height property from Internet Explorer. In IE7, the value will be applied */ Head + body { height: 300px; ... }
"head:first-child + body" 第一子节点和相邻节点 filter
这个CSS filter基于Internet Explorer中两个以前的非未被执行的特性(:first-child伪类和相邻节点)。它被用来隐藏声明排除。从版本7开始，Internet Explorer可以在声明中使用属性。
注意：当被用来检测浏览器或者浏览器的版本时，将:first-child节点和相邻节点连接的CSS样式规则仅被认为是CSS filter。
/* The following rule used to hide the height property from Internet Explorer. In IE7, the value will be applied */ head:first-child + body { height: 300px; ... }
我的页面被破坏了，我应该做什么？
这部分内容说明了处理问题时可能的策略。
处理overflow:visible的默认行为
如果没有设置宽和高，那么在你的版面中的区域应该可以像在IE6中一样正常显示（除非太多的词语或者预先的内容可能导致了溢出），这样应该就很好了。
由于新的行为，你的版面在两种情况下有可能被破坏：
1.
|
已经设置了宽和高，并且没有意识到内容的多少实际上比设置的值要大。
这种情况很好解决。只要了解内容的正确多少（开发人员工具栏上面的尺子可以帮助你），并且为区域制定合适的尺寸。
|
2.
|
有需要改变区域大小的动态内容。当动态的插入内容时、或者当没有指定字体大小并且用户修改了它们时，会出现这种情况。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"> <html> <title> CSS: Overflow:visible and Min/Max </title> <style> .DivClass1 { background:orange; width:150px; height:100px; } </style> <body> <div contenteditable=true class=DivClass1> this is a DIV with a fixed width and height of 100 pixels, in IE 6, the height of the DIV will extend to the height of the content. In IE7, the height of the DIV is 100px as specified, but the text overflows outside of the box. </div> </body> </html>
可以使用像IE7一样的现代浏览器中新的min-height属性来改正这个行为。为了确保这些行为在更老的IE中不会发生改变，我们推荐使用条件注释。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN"> <html> <title> CSS: Overflow:visible and Min/Max </title> <!-- Will only be read by IE versions less then IE 7--> <!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="Demo/iestyles.css" /> <![endif]--> <style> .DivClass1 { background:orange; width:150px; min-height:100px; // will be ignored by IE6 } </style> <body> <div contenteditable=true class=DivClass1> this is a DIV with a fixed width and height of 100 pixels, in IE 6, the height of the DIV will extend to the height of the content. In IE7, the height of the DIV is 100px as specified, but the text overflows outside of the box. </div> </body> </html>
在iestyles.css，应该指定IE6以及一下版本的行为。
.DivClass1 { height:100px; // applies only to versions that do not understand min-height }
使用conditional comments是一个简单、可维护的方法，用来将更老的IE版本中的行为从IE7中的更加标准的行为中分离出来。
由于CSS filter的改进而导致的错误页面
如果页面设计在IE7 strict模式下无法正常显示，您下列三个选项：
| • |
a.第一，尝试建立标准的、可以跨浏览器使用的设计。通过简化页面、你可以解决这些问题并且减少维修费用。 |
| • |
b.使用条件注释。 |
| • |
c.如果不得不使用CSS filter，考虑那些业可以在以前版本的浏览器上面正常运行的filter。这可以将工作中未来遇到问题的风险降到最低。 |
使用条件注释
从Internet Explorer 5开始Conditional comments就可用了，并且提供了简单、可维护的方法来检测IE的浏览器类型和版本。因为语法是基于注释的，其它的浏览器只会忽略这种情况。这是一个将*HTML filter替换的好方法。为了保证它是清楚的，我们建议大家使用条件注释来设置一个联接。
<!--[if IE]> <link rel="stylesheet" type="text/css" href="iestyles.css" /> <![endif]-->
有效的使用CSS filter
我们已经了解了由于处理浏览器行为的不同而带来的痛处。CSS filter如果和两个指导方针一起使用，那么使用它是很好的。
| • |
a.仅考虑面向“老于现在”版本浏览器中的filter，这可以确保您的filter不会在新版本出现时出现问题。有一些filter，例如仅面向IE5.5甚至更早，那么使用起来是安全的。 |
| • |
b.要知道它们是filter。确保在它们出现问题时候，及时进行修复。并提供能够明确标示它们是filter的注释。 |
我们一直在关注兼容性的需求
我们从开发人员社区了解到，一些反馈一直在要求更符合标准的呈现行为。我们正在处理这些要求，同时也需要考虑用户不想破坏页面的要求。为了找到一个平衡点，我们在IE6中引入了strict模式，使得作者可以进行更加符合标准的页面呈现。在IE7 中，页面作者使用非strict模式（quirks模式）将不会改变行为，并且不会被破坏的CSS filter所影响。在strict模式下，我们已经，并将继续确保改变更加的复合标准。作为副产品，当我们的改变更加符合标准时，在旧的strict版本中的内容可能被破坏。这会发生在被破坏的CSS filter上。这依赖于执行特定的行为，而不是CSS规范。
我们希望这篇文章可以帮助大家理解IE7中CSS兼容性问题的根本原因，并且提供足够的建议帮助您减少问题。
把此文章收藏到：
