IE7 beta2的CSS兼容性

转载 2007年09月25日 15:02:00
当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)。比如:
<?xml version="1.0" encoding="gb2312"?>  虽然初衷是为了让文档更“标准”,但由于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出现。

IE7下按钮<input>不显示自定义背景图片

原代码 页面html如下 css样式如下 可就是不显示图片背景 btn{ background-image: url(../Images/img.png); background-repea...
  • liuzhiquan_1025
  • liuzhiquan_1025
  • 2013年11月21日 11:30
  • 667

应用before/after伪类时如何CSS命名以及针对ie6/ie7浏览器兼容

一、诉说前言  before/after伪类相当于在元素内部插入两个额外的标签,其最适合也是最推荐的应用就是图形生成。在一些精致的UI实现上,可以简化HTML代码,提高可读性和可维护性。国外这两个伪...
  • sbt0198
  • sbt0198
  • 2015年06月24日 14:55
  • 1391

CSS3 Box-sizing属性以及解决兼容性的一些做法

box-sizing是CSS3的box属性之一。一说到CSS的盒模型(Box model)我想很多人都会比较烦,特别是对于新手,然而这个Box model又是我们CSS运用中比较重要的一个属性。那...
  • orichisonic
  • orichisonic
  • 2015年10月14日 13:00
  • 2860

使层垂直居中的display:table-cell方法,多浏览器兼容

ie7和ie6都不能识别 display: table-cell;(但是支持display: block等css1的属性!) ie8以及以后版本可以识别! ie7和ie6能识别vertical...
  • sunny327
  • sunny327
  • 2014年07月24日 11:26
  • 4721

IE7的CSS兼容性

IE7的CSS兼容性:毫无疑问的是微软发布IE7不仅仅是出了安全方面的考量, IE6错综复杂的BUG是各位网站主的梦魇, 也是微软的心头之痛, IE7在css的支持方面绝对是比IE6有了长足的进步, ...
  • High_Mount
  • High_Mount
  • 2008年05月11日 15:26
  • 4570

ie6, ie7兼容性问题以及处理办法汇总

1、IE6中绝对定位位置错误 问题描述:在ie6中,如果参照物没有触发haslayout ,那么绝对定位的容器的left和bottom就会有问题。 解决办法:在相对定位的父容器上加入 zoom:1 来...
  • zdp072
  • zdp072
  • 2014年03月30日 18:03
  • 3068

关于IE7 z-index的浏览器兼容性问题完美解决方案

关于IE7 z-index的浏览器兼容性问题完美解决方案 来源:互联网 作者:佚名 时间:01-07 17:13:54 【大 中 小】 在了IE7的z-index问题上真是很头疼。可又不...
  • cly153239
  • cly153239
  • 2015年07月13日 16:57
  • 722

css3中动画兼容版

.mymove{     display:block;     postion:relative;     -webkit-animation-name: mymove;     animation...
  • zyzn1425077119
  • zyzn1425077119
  • 2016年04月14日 12:41
  • 1631

伪元素(3)-解决IE6/IE7/IE8不支持before,after问题

解决IE6/IE7/IE8不支持before,after问题
  • shangshanling
  • shangshanling
  • 2016年06月12日 11:28
  • 8137

CSS实现不定高度垂直居中 兼容IE7

xmlns="http://www.w3.org/1999/xhtml"> ��������ʵ�ִ�ֱ���� http-equiv="Cont...
  • u014071104
  • u014071104
  • 2015年10月20日 22:13
  • 1365
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:IE7 beta2的CSS兼容性
举报原因:
原因补充:

(最多只允许输入30个字)