IE7的CSS兼容性

时间：2022-08-25 20:30:13
IE7的CSS兼容性:

毫无疑问的是微软发布IE7不仅仅是出了安全方面的考量, IE6错综复杂的BUG是各位网站主的梦魇, 也是微软的心头之痛, IE7在css的支持方面绝对是比IE6有了长足的进步, 但和Firefox相比, 还是有一段距离. 微软到底是向W3C屈服了.

所以, 如果你的网站CSS满足以下条件, 可以说IE7会把你的网站渲染得很好:

1. 你的网站在IE6下表现正常;

2. 你的的网站在Firefox下表现完美;

3. 你的CSS代码中不含有诸如>body之类的针对IE6的Hack.

IE7在CSS兼容性方面的变化:

1. IE7与IE6相比, 有多达200多处改进, 但它们都是在Strict Mode下实现的, 即在页首声明DocType为XHTML Transitional, XHTML Strict等. 而在Quirks Mode下, IE7和IE6别无二致;

2. IE终于支持Alpha通道的PNG图片了. 这些Alpha通道图片, 如透明PNG24图片在IE6下是不能正常显示的. 本站为了实现在IE6下的图片透明使用了一个PHP破解方法(暂保密).

3. 盒子模型改变了; 这点在微软的Blog中有详细说明, 摘录如下:

在Html文件中写入:

<div>
<blockquote>
<p>some text long enough to make it interesting.</p>
<cite>- anonymous</cite>
</blockquote>
</div>

在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;}

在IE6下表现如下:

IE7的CSS兼容性

而在IE7下表现如下:

IE7的CSS兼容性

简单的说, 盒子对于”overflow”使用了”visible”默认值, 所以对于子元素尺寸大于父元素尺寸时, IE7会和Firefox一样将子元素露出于父元素之外显示, 而不是像IE6那样把父元素撑大了包含子元素.

4. 有哪些IE5/6中的BUG在IE7中被修正:

* Line-height bug

更加详细的列表见于微软的官方Blog.

你的网页乱了怎么办?

归根结底, 我们是要解决问题的, 你大可不必等到IE7最终版的发布了, 因为微软已经声明与IE7(RC)兼容的网页在IE7最终版中也是表现正常的.

1. 如果你使用了一些CSS Hack, 很可能问题出在它们, 重写它们吧.

2. 如果你实在是不知道如何让你的网页在IE和Firefox中表现一致, 那么你可尝试在<head></head>中加入如下代码:

<!–[if IE]>
<link rel=”stylesheet” type=”text/css” href=”iestyles.css” />
<![endif]–>

然后为IE单独写一个CSS文件iestyles.css

3. 调试再调试; 解决不了的问题, 把它们发给你的朋友, 或是在Google里搜索一下.

可以预见的未来

1. 你需要照顾的浏览器将是IE6, IE7, Firefox, Opera, Safari;

2. 在未来很长一段时间里, IE6将和IE7平分秋色, 甚至是独霸一方, 尤其是在盗版严重, (可能)无法正常更新的中国地区.

3. 长期购买盗版软件的国内人士, 将为自己的行为长期埋单. 而我将加快摆脱盗版软件的束缚, 比如已经彻底弃用IE(除了调试网页时), 用Firefox及其插件实现数十种以前只有收费软件才能达成的功能. 最终弃用Windows.

Important References

[END]

转自： http://jorux.com/archives/css-compatibility-in-ie7-rc/   JUXOR

标签：

相关文章