IE7与web标准设计（3）
互联网 发布时间：2008-10-17 19:26:13 作者：佚名 
我要评论
我要评论上文：IE7与web标准设计（2）
IE历来被web标准的拥护者所诟病，而当FireFox横空出世以后，更多的网页制作者开始关注web标准设计。看着FireFox的市场占有率不停的上升，微软终于推出了IE7。但IE7是否真的能够力挽狂澜，是否真的能够得到用户的信任，是否真的能够得到网页
表面原因——放纵的孩子和严厉的父亲
在2007年5月份的时候，我曾经写过一篇文章，叫做《IE6与IE7，放纵的孩子与严厉的父亲》。当时技术水平和对web标准的认知有限，所以写出来的这篇文章，虽然从表面合理的解释了造成布局混乱的原因，但是并没有说到根本上去。可谓“只知其一，不知其二”，但是这里依然推荐你阅读一篇。因为“先知其一，再知其二”将更有助于这“其二”的原因。
“其二”原因——IE6对“overflow:visible”的误解
为了兼顾到对overflow可能还不是很了解到朋友，这里是关于overflow样式的一些资料：W3C关于overflow的资料。请注意W3C对于visible参数的解释：
Visible： "This value indicates that content is not clipped, i.e.,it may be rendered outside the block box（注：后面这句可能是后续版本补充上来的）".
注意，w3c只是说，超出容器的内部不会被剪切。但是它并没有说，超出来的内容可以“撑开”容器。所以下面这个例子中IE7和FireFox的解释和渲染是正确的，而IE6则是错误的（因为它错误的认为，只有让容器内的内容“撑开”容器，才能让容器内的内容在超出时不被剪切）。
<!DOCTYPE html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Keywords" content="YES!B/S!,web标准,杨正祎,博客园,实例代码" />
<meta name="Description" content="这是一个简单YES!B/S!文章示例页面,来自杨正祎的博客,http://justinyoung.cnblogs.com/" />
<title>YES!B/S!文章示例页面</title>
<style type="text/css">
#div1{
border:1px solid red;
width:50px;
}
</style>
</head>
<body>
<div id="div1">
alonglonglonglonglonglonglonglonglongword from <a href="http://justinyoung.cnblogs.com/" title="">http://justinyoung.cnblogs.com/</a>
</div>
</body>
</html>
下面是上面示例分别在IE6，IE7，FireFox（版本2.0.0，12）和Oepra（版本9.25）中的显示效果截图（IE6和IE7共存的方法，可以参考文章《IE6和IE7共存方法（别人是别人的，我是我的）》）。
显然只有IE6的渲染结果是“另类”的
从图片中我们可以看到IE7和FireFox的渲染结果是一样，IE6是个“坏孩子”，就不多说了，而Oepra的渲染结果和FireFox以及IE7也是有点差距的。但是这不是因为对overflow样式的理解有误差造成的，所以这里也不再扯开话题了。
相关文章
这篇文章主要分享的是web技术的 AudioContext 实现音频可视化，要实现音频可视化得先实现一些炫酷的效果需要借助 Web Audio API提供的一些方法 AudioContext，下面详细内容2022-02-23
这篇文章主要给大家介绍了web技术中的WebRTC记录音视频流，文章内容围绕主题展相关资料，需要的小伙伴可以参考一下，希望对你有所帮助2022-02-23- 这是我通过网上查阅资料总结的一些编码规范，用于巩固对html，css页面重构时的基础,需要的朋友可以参考下2020-12-19
前端编码规范（4）—— CSS 和 Sass (SCSS) 开发规范
这篇文章主要介绍了前端编码规范（4）—— CSS 和 Sass (SCSS) 开发规范,需要的朋友可以参考下2017-01-21Web前端开发规范2017(HTML/JavaScript/CSS)
这是一份旨在增强团队的开发协作，提高代码质量和打造开发基石的编码风格规范，其中包含了 HTML, JavaScript 和 CSS/SCSS 这几个部分。我们知道，当一个团队开始指定并实行2017-01-21- 这篇文章主要为大家介绍了前端开发团队遵循和约定的代码书写规范，意在提高代码的规范性和可维护性,需要的朋友可以参考下2017-01-21
- 这篇文章主要为大家详细介绍了响应式Web之流式网格系统的相关资料，感兴趣的小伙伴们可以参考一下2016-07-04
- 下面小编就为大家分享一篇在网页标题栏上和收藏夹显示网站logo的实现方法。希望对大家有所帮助。一起跟随小编过来看看吧，祝大家游戏愉快哦2016-03-16
- 基于很多用户都在下载Visual Foxpro 6.0，但是有安装vtp6.0经验的朋友确很少，在安装过程中总会出现这样那样的问题，基于这些问题，下面小编抽个时间把Visual Foxpro 6.02015-09-09
- 网站日志200 0 64状态码的分析介绍2012-10-29
最新评论