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渲染的情况。

时间: 2024-09-27 15:10:26

IE7&nbsp;beta2的CSS兼容性的相关文章

IE7,6与Fireofx的CSS兼容性处理方法集结

CSS对浏览器的兼容性有时让人很头疼,尤其是对于IE6这个问题多多的浏览器版本,从网上收集了IE7,6与Fireofx的兼容性处理方法并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加DOCTYPE声明.  一.CSS 1.vertical-align:middle文字垂直居中,对于某些元素如div{width:200px;height:200px;}不会有效果,只需给div{line-height:200px;

CSS兼容性技巧大全(一)

网页制作Webjx文章简介:CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理技巧并整理了一下.对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明. CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理技巧并整理了一下.对于web2.0

IE和火狐的css兼容性问题总结

CSS对浏览器器的兼容性具有很高的价值,通常情况下IE和火狐浏览器存在很大的解析差异,这里介绍一下兼容要点. CSS对浏览器器的兼容性具有很高的价值,通常情况下IE和火狐浏览器存在很大的解析差异,这里介绍一下兼容要点. 1.DOCTYPE 影响 CSS 处理 2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行 3.FF: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-

js组件-CSS兼容性处理方法有哪些

问题描述 CSS兼容性处理方法有哪些 怎么做做兼容处理 跪求大师解决啊 好么 希望大家可以帮我解决啊 哈哈哈哈 解决方案 IE7,6与Fireofx的CSS兼容性处理方法大全css兼容性IE Firefox css 兼容性处理

兼容IE6/IE7/IE8/FireFox的CSS hack

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>区别IE6.IE

css兼容性问题经验总结

css兼容性问题经验总结,水平有限,如果哪里不对,希望指正啊. 都是很早以前写的,水平有限,如果哪里不对,希望指正啊. IE的问题: 一.双边距问题 浮动元素的外边距会加倍,但与第一个浮动元素相邻的其他浮动元素外边距不会加倍. 解决方法:在此浮动元素增加样式  display:inline; 二.图片产生的间隙 父元素直接包含<img>,这个图片下方会和父元素边缘产生间隙. 解绝方法:1.在源代码中让</div>和<img>在同一行,因为那个间隙是由换行符产生的.  

firefox-火狐浏览器css兼容性问题

问题描述 火狐浏览器css兼容性问题 我用:after创建了一个三角形,chrome下是正常的,但是火狐下看中间有一条裂缝.后来我看了一下好像是transform的问题,可是我写了针对火狐的兼容,但是好象没有用.我的代码如下: &:after { position: absolute; left: -63px; top: -63px; content: ""; width: 0; height: 0; border: 63px solid rgba(1, 192, 154, 0

关于CSS兼容性的一些经验

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 在网页排版布局的时候,CSS兼容性问题,相信是每个网页制作人员最头疼的问题,这里仅仅分享下我个人的经验. 网页都可以分为3个部分,头部(header),主体部分(main)和脚注(footer),为了避免出现大的兼容性问题,可以在header和footer设置好高度,然后加上overflow:hidden; ,main部分则设置好宽度,同样加

奇怪的CSS兼容性问题,IE6显示正常,IE7/FF就不正常了

问题描述 我做了一个页面,大致的代码如下(抱歉,由于休假没有办公电脑不能贴出完整的代码):css部分:#line1,#line2,#line3{clear:both;margin:0auto;}html部分:<divid="content"><divid="line1">内部还有几个子div</div><divid="line2">内部还有几个子div</div><divid=&q