IE7的web标准之道 Ⅲ(4)
作者:阿一 来源:JustinYoung's Blog 发布时间:2008-08-20 12:55:00
表面原因——放纵的孩子和严厉的父亲
在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样式的理解有误差造成的,所以这里也不再扯开话题了。
猜你喜欢
- names=["zhao00","qian01","sun02","l
- 1 写在前面1. 本文介绍的是基于TensorFlow tf.estimator接口的深度学习网络,而非TensorFlow&nb
- table通过使用下面语句创建:create table userinfo(name text, email text)更快地插入数据在此用
- Pycharm中import torch报错问题描述:今天在跑GitHub上一个深度学习的模型,需要引入一个torch包,在pycharm中
- 学Python,想必大家都是从爬虫开始的吧。毕竟网上类似的资源很丰富,开源项目也非常多。Python学习网络爬虫主要分3个大的版块:抓取,分
- 对数字货币的崛起感到新奇的我们,并且想知道其背后的技术——区块链是怎样实现的。 但是完全搞懂区块链并非易事,我喜欢在实践中学习,通
- python操纵mysql数据库,向一个表中插入一条新的记录。pycahrm提供一个很好的功能,在右边上面,可以连接数据库,并在里面手动操作
- Python中的函数调用与c++不同的是将this指针直接作为self当作第一个形参进行处理,从而将静态函数与实例方法的调用形式统一了起来。
- 【原文地址】 Tip/Trick: How to upload a .SQL file to a Hoster and
- 以下是引用片段:Function c2u(myText) Dim i c2u = "" For i = 1 to Len
- 目录前言项目设计后端前端运行项目Q&A前言在前面的Api开发中,我们使用FastApi已经可以很好的实现。但是实际使用中,我们通常建
- MySQL内外连接表的连接分为内连接和外连接。内连接内连接内连接的SQL如下:SELECT ... FROM t1 INNER JOIN t
- QQ医生在广大用户心中一直以来都是清爽便捷的一款安全工具,随着QQ医生的不断发展,QQ医生团队一直在思考,怎样能够给QQ医生用户带来性能更优
- 在SQL Server数据库操作中,我们常常会用到存储过程对实现对查询的数据的分页处理,以方便浏览者的浏览。本文我们总结了五种SQL Ser
- 写作思路1、简述实现原理2、部分代码解析3、位置同步解析(①上下两屏位置同步②编辑屏位置保持不变)效果图如下:版本1:这就是我们常见的预览窗
- 一、问题说明首先,运行下述代码,复现问题:# -*-coding:utf-8-*-import reimport requestsfrom
- 之前折磨了很久,想在Mysql命令行下导出数据库,但就是每天提示不那个错误,后来才知道其实mysqldump不是mysql命令,因此不能在M
- 如果内部修改外部变量需要nonlocal,globaldef f1(): print("in f1..") num=11
- 本文实例讲述了python实现上传样本到virustotal并查询扫描信息的方法。分享给大家供大家参考。具体方法如下:import simp
- 关于axios的封装下面代码参考了 vue-element-admin 中的封装方式,request.js 文件如下,封装一个 axios