IE7的web标准之道 Ⅲ（6）
作者：阿一 来源：JustinYoung's Blog 发布时间：2008-08-20 12:55:00
如何解决“横向撑开”问题
用“word-wrap: break-word”解决：
导致布局混乱的主要原因，是IE6对overflow的visible的错误解释，才导致宽度被“撑开”才造成的。所以，我们必须采取措施，让IE6中容器不能那么“放纵孩子”才可以。方法就是使用“word-wrap: break-word”样式（IE特有，FireFox不起任何作用），强制要求容器内的内容不允许“撑开”父容器。下面的示例可能有助于理解。
<!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;
word-wrap: break-word;
}
</style>
</head>
<body>
<div id="div1">
alonglonglonglonglonglonglonglonglongword from <a href="http://justinyoung.cnblogs.com/" title="">http://justinyoung.cnblogs.com/</a>
</div>
</body>
</html>
利用“word-wrap: break-word”可以让IE6中的“孩子”乖乖的待在“父亲”的允许访问内。如下图所示：
利用“word-wrap: break-word”后，即使在IE6中，容器也不再被“撑开”
用“overflow: hidden”解决：
显然，用“word-wrap: break-word”又导致了IE（IE6和IE7）和FireFox的显示结果新的不一致。那还有没有其他的办法呢？“擒贼先擒王”，既然是“overflow: visible”导致的bug，那直接改变“overflow”的值不就可以了吗？所以，使用“overflow: hidden”便能让IE6、IE7和FireFox显示一直。下面的这个示例，可能会有助于你的理解：
<!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;
overflow: hidden;
}
</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中的现实效果截图：
IE6、IE7和FireFox中终于显示一致了
0
投稿猜你喜欢
贴代码：import os import sys iplist = list() ip = '192.168.1.11' #- 使用递归查找父元素，知道查到想要的元素，然后return getParentTag(startTag) { var self
- 在编写自动化测试用例的时候，每次登录都需要输入验证码，后来想把让python自己识别图片里的验证码，不需要自己手动登陆，所以查了一下识别功能
- <?php /** 默认首页 **/ class DefaultController extends AppController {
- 本文实例讲述了ThinkPHP5.0框架控制器继承基类和自定义类。分享给大家供大家参考，具体如下：继承系统控制器基类：<?phpnam
- 在项目过程中，我们常常需要获取IP的所在地。而这一功能一般都是通过一些数据网站的对外接口来实现，这些接口一般情况下都是付费使用的。在这篇文章
- 测试数据 http://grouplens.org/datasets/movielens/协同过滤推荐算法主要分为：1、基于用户。根据相邻用
- 最近，为了能在数据库服务器中运行其他应用程序，在保持数据库操作系统版本不变的前提下对数据库服务器进行了软、硬件上的升级。在软件上，将操作系统
- 本文实例讲述了mysql累积聚合原理与用法。分享给大家供大家参考，具体如下：累积聚合为聚合从序列内第一个元素到当前元素的数据，如为每个员工返
- 研究（2）中讨论了栅格系统的基础知识。这一篇将集中探讨栅格系统的粒度问题。（注：如非特别指明，栅格系统均指24列960栅格系统）淘宝的首页（
- 前言昨天主管突然给我说微信小程序默认的 tabBar 不美观，让我改成中间突出的那种样式。纵然我心里面有千般不情愿，但还是接下了这个任务。查
- 你甚至可以在一行内将多个值赋值给多个变量>>> a , b = 45, 54>>> a45>>
- TKinterPython 的 GUI 库非常多，之所以选择 Tkinter，一是最为简单，二是自带库，不需下载安装，随时使用，跨平台兼容性
- 前记在Python3.7后官方库出现了contextvars模块, 它的主要功能就是可以为多线程以及asyncio生态添加上下文功能,即使程
- system默认:managersys默认:change_on_install使用SQL Plus登录数据库时，system使用密码mana
- 最近由于某些原因，需要用到Python模拟登录网站，但是以前对这块并不了解，而且目标网站的登录方法较为复杂， 所以一下卡在这里了，于是我决定
- 本文实例讲述了python实现的config文件读写功能。分享给大家供大家参考，具体如下：1、设置配置文件[mysql]host = 123
- 数据库优化是一项很复杂的工作，因为这最终需要对系统优化的很好理解才行。尽管对系统或应用系统的了解不多的情况下优化效果还不错，但是如果想优化的
- Document自带的方法： 循环执行：var timeid = window.setInterval（“方法名或方法”，“延时”）;win
- 引言你知道什么是依赖注入吗？依赖注入（DI）的概念虽然听起来很深奥，但是如果你用过一些新兴的php框架的话，对于DI一定不陌生，因为它们多多
