IE7 beta2的CSS兼容性

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

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

盒模型变了!!!

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

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

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

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

  Oh,My GOD!又是盒模型!

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

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

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

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

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

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

* html

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

* html{...}
* html body{...}

现在IE beta2将和大部队一起把它们忽略掉。

下划线Hack

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

.myclass{
min-height:300px;

_height:300px;

}

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

/**/注释Hack

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

.myclass{

height/**/:300px;

}

由于增强功能而失效的Hack技巧

原来IE不支持以下写法,现在可以了:

child选择符Hack
html > body{
height:300px;
}
相邻选择符Hack
head + body{
height:300px;
}
相邻选择符和first-child伪类选择符
head:first-child + body{
height:300px;
}

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

俺的页面乱咧,咋办?

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

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

  fight!

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


CSS雪碧图是一种将多个小图合并成一张大图的优化技术,能够减少请求次数,提升页面性能。但是,我们在使用雪碧图时,可能还需要为其中的某一个小图添加超链接。这该怎么实现呢?下面我们来介绍一下。
今天我来介绍一下如何使用CSS来实现图片上下移动位置的效果。 首先,我们需要在HTML中添加一个图片元素,并给它一个唯一的ID。比如:
CSS中,我们可以利用transition属性来为元素添加动画效果。与这个属性相关的其他属性包括transition-delay、transition-duration、transition-property和transition-timing-function。在这篇文章中,我们将聚焦于t
CSS中如何让li居中对齐 在Web开发中,经常需要用到无序列表(ul)来呈现一些内容,但是默认情况下,这些li元素是左对齐的。那么,如何让li元素居中对齐呢?下面是一些实用的CSS技巧。
CSS是一种用来控制网页样式的语言,它可以用来控制页面元素的位置、大小和颜色等,其中有一种很重要的功能就是对齐方式的控制。下面我们来看看具体如何使用CSS来对齐页面元素。
CSS中的图片等比例缩放是网页设计中常用的技巧之一,因为这样可以让图片在不改变其宽高比的情况下适应不同的屏幕尺寸。以下是实现图片等比例缩放的方法:
CSS是一门非常重要的网页设计语言,可以控制网页的布局、颜色、字体等各种属性。有时候我们可能需要在网页中不加颜色的字体,这时候就需要用到一些技巧来达到这个目的。
CSS3是一项新的技术,可以为我们的网站添加许多惊艳的动画和效果。其中一种常用的效果是3D旋转效果图,它可以使图片和文字在页面中呈现出立体效果。
在CSS中,我们可以通过一些技巧来实现图片一帧帧播放的效果。最关键的是利用CSS的animation属性,通过关键帧动画来实现。
CSS是一个用于控制网页外观的语言。CSS不仅可以设置元素的样式,还可以将多个元素组合起来并共享样式。其中,最常用的组合方式就是同时使用两个或更多类。
CSS是网页设计中非常重要的一部分,它可以为网页元素设置各种样式,其中我们经常需要为边框设置样式。下面我们来看一下如何使用CSS为边框设定样式。
CSS渐变是Web设计中经常使用的一种技术,它可以让网页元素颜色从一个颜色到另一个颜色平滑过度。从右到左的渐变效果也十分常见,接下来我们就来介绍一下如何实现这样的效果。
CSS提供了许多方式来美化我们的网页,其中一种就是在图片上加入蒙层。这种效果可以让图片更有层次感,更具有视觉冲击力。下面我们来看一下如何使用CSS在图片上添加蒙层。
CSS是网页设计中重要的一部分,它可以让网页更加美观和具有吸引力。其中,图片上加蒙板是一种常见的设计方式。
CSS图片上下翻转动画是一种常见的网页动画效果,可以提高网页的视觉吸引力。下面介绍一种简单的CSS实现方式。
CSS(层叠样式表)是网页设计中必不可少的一部分,它通过控制HTML元素的样式来美化网页排版。而与CSS相关的最重要的任务之一就是与浏览器建立关系,以确保网页能够顺利地在不同的浏览器上正常显示。
在进行网页设计时,经常会涉及到在图片上放置图片的需求。在这种情况下,就需要使用CSS技术来实现。然而,在实际操作中,有时候会发现放置的图片并不能正常显示,这就需要我们仔细检查代码,找出问题所在。
在网页设计中,css是一种十分重要的样式语言。其中,设置段落间距也是css中常见的一种样式操作。一般来说,我们可以通过margin和padding属性来实现这一功能。
CSS 图片三角形是一种非常有用的技巧,它可以通过纯CSS代码实现。这是Web设计和开发必不可少的技能之一,因为它可以使页面更加具有吸引力和美观。
在网页设计中,常常会用到在图片上添加另一张图片的效果。然而,有时候我们会遇到这样的问题:我们的浏览器看到了HTML代码中的标签,但是图片却没有显示出来。这种情况的解决方法就是注意CSS代码的书写。