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）。比如：

<?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出现。

　　Fight！

赞 (0)

相关推荐

  • CSS兼容要点分析

    IE vs FF CSS 兼容要点: DOCTYPE 影响 CSS 处理 FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) 方可居中 FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 h

  • 使css兼容IE8的小技巧

    这样就存在了新的问题,目前在IE7中工作正常的网页在IE8中会出现问题. 微软在IE8提供三种解析页面的模式 IE8 Standard Modes :默认的最标准的模式,严格按照W3C相关规定 IE7 Standards Modes :IE7现在用的解析网页的模式,开起机关是在中加入  Quirks Modes :IE5用的解析网页的模式,开起机关是删除HTML顶部的DOCTYPE声明  注意:不同模式间的网页在IE8中可以互相 frame ,因此因不会模式下的DOM和CSS渲染不一样,所以会引

  • 多浏览器css兼容分析小结

    CSS 兼容要点:  1. DOCTYPE 影响CSS 处理 . 2 .FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行.  3 .FF: body 设置text-align 时, div 需要设置margin: auto(主要是 margin-left,margin-right) 方可居中.  4 .FF: 设置padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 

  • Css浏览器兼容的解决方法

    一.网页背景半透明网页背景半透明 复制代码 代码如下: opacity:0.8;filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=80)";IE6中CSS方法解决PNG图片半透明问题:#DIVname {      width: 300px;      height: 99px;      background: url('images/top.png') no-repeat top;      *background: n

  • IE7 beta2的CSS兼容性

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

  • 浏览器兼容解决FF/IE6/IE7背景专用CSS HACK

    自从互联网开始的那一刻起,各浏览器间的争斗就没有停止过.当然其中最苦的就是网页制作人员了,为了达到用户体验以及可用性的标准,不得不在多个浏览器上为统一效果而奔波.真希望哪一天FF可以一统天下,虽然现在还是IE的大天下.特别是微软最新发布的IE7浏览器,其CSS的兼容性确实给一些网页制作人员又添加了一个沉重的新负担. 为了让各浏览器有同样的显示效果,我们不得不用到CSS HACK.当然在这篇文章中我们只谈现在使用率最高的IE6和FF,以及将来可能会成为主流的IE7的CSS HACK,至于IE6以下

  • css ie6 ie7 ff的CSS hack使用技巧

    FF浏览器 .test{ height:20px; background-color:orange; } IE7浏览器 *+html .test{/*IE7*/ height:20px; background-color:blue; } IE6浏览器 *html .test{/*IE6*/ height:20px; background-color:black; } 通过上面的CSS代码可以看出FF还是最听话的浏览器.在IE6和IE7如果要使用HACK必须要在前面加上夫级标签html. 这里就很

  • css 兼容性问题this.style.cursor=''hand''

    作者:洛科先看这一句 复制代码 代码如下: <a href='#' onmouseover="this.style.cursor='hand'" onmouseout="this.style.cursor='default'" onclick="document.getElementById('ShowContent').innerHTML='';return false;"> <img alt="清空屏幕"

  • firefox和IE系列的相关区别整理 以备后用

    firefox和IE系列的相关区别整理 以备后用

    .IE与FireFox的js和css png透明 AlphaImageLoaderfilter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=bEnabled,sizingMethod=sSize,src=sURL) enabled:可选项.布尔值(Boolean).设置或检索滤镜是否激活.true:默认值.滤镜激活.false:滤镜被禁止.sizingMethod:可选项.字符串(String).设置或检索滤镜作用的对象的

  • 网站导致浏览器崩溃的原因总结(多款浏览器) 推荐

    面试某公司的时候,面试官问到,导致浏览器崩溃的原因有哪些?愚辈不才,仅回答出了内存泄漏.其实在网页在装载的过程中,常常由于种种原因使浏览器的反映变的很慢,或造成浏览器失去响应,甚至会导致机器无法进行其他的操作. 对于访客,如果登录您网站,浏览器就立刻崩溃,我想这对谁都是无法容忍的,对此总结了网站导致浏览器崩溃的原因: 1. 内存泄漏 还是先谈下内存泄漏,网站由于内存泄漏的而照成崩溃有两种情况,服务器的崩溃和浏览器的崩溃.内存泄漏所造成的问题是显而易见的,它使得已分配的内存的引用就会丢失,只要系统

  • jQuery实现二级下拉菜单效果

    jQuery实现二级下拉菜单效果

    大家都知道jQuery是一个框架,它对JS进行了封装,使其更方便使用.前面两篇博文分别是用CSS样式和JS实现的,那么这篇就用jQuery来实现二级下拉式菜单. 使用JQuery实现需要用到的知识有:     1)使用$(function(){...})获取到想要作用的HTML元素.        2)通过使用children()方法寻找子元素.        3)通过使用show()方法来显示HTML元素.        4)通过使用hide()方法来隐藏HTML元素.        5)jQ

  • JavaScript实现下拉菜单的显示和隐藏

    JavaScript实现下拉菜单的显示和隐藏

    我们这一篇来用JavaScript脚本实现下拉菜单的显示和隐藏.使用JavaScript方法实现我们需要用的知识有: 1)JS事件:onmouseover鼠标经过事件和onmouseout鼠标离开事件. 2)JS基础语法:使用function关键字定义函数. 3)DOM编程:getElementsByTagName()方法. 那么接下来就是我们制作的流程: 1)隐藏二级菜单:设置CSS样式,让二级菜单隐藏. 2)编写显示子菜单showsub()函数:使用getElementsByTagName获

随机推荐