1.3 无懈可击的方法
我将和大家分享一种策略，它在我自己已经完成的好几个项目中已被证明是成功的，它结合使用了关键字和百分比值。使用关键字作为 font-size 属性的值，解决 了先前我们在 eyeglasses.com 的例子(以及数百万的其他网站)中所暴露出来的问题。和 使用像素不同，现在无论用户使用哪种浏览器或设备，都将能够改变页面文字的大小 了。下面就来看看这是如何实现的。
1.3.1 关键字
前面已经提到过，使用关键字时我们有 7 个值可用：xx-small、x-small、 small、medium、large、x-large、xx-large。这里给出它是如何声明的，例 如设定<body>对象中的文字大小：
body {
font-size: small;
}
|
关键字设定的文字大小与浏览器当前的默认设置有关。换句话说，如果用户调整 了浏览器的设置，使其基准文字大小比默认值更大或更小些，则该关键字的显示结果 就会相对于这个新默认值成比例变化。无论基准大小是多少，各个关键字之间的变化 比例总是恒定的。
例如，图 1-3 展示了各个关键字值在浏览器的默认文字大小的不同设置下的变化情 况。我这里是用 Sa fa r i 浏览器做的演示。
 |
| 图 1 - 3 Safa ri 中各个关键字显示结果变化的比较。右图中，基准文字大小被设大了一些 |
您会注意到，根据基准文字大小的不同，small 值的实际显示大小会不一样，然而 small 值和其前后相邻的值的显示大小之间总是保持相同的比例。
1.3.2 放弃像素级别的精确度
每一个使用关键字(或者其他任何除px之外的font-size属性单位)的设计师面临的最 大障碍是：由于浏览器，操作系统，以及软件设置的不同，同一个关键字的实际显 示大小将会有细微的区别。
例如，我们刚刚展示过的，关键字值 small 的实际显示大小，即使在基准文字大 小都设置为默认的中等字号的情况下，也会因为浏览器和/ 或所用操作系统的不同而有所差异。
如果“像素的大小要绝对一致”被认为是 Web 世界的一个法则，那么关键字则更 像是一个指导方针，给出一些关于浏览器或设备应该按照怎样的大小显示文字的建议。 如果您愿意在精确程度上做一些让步，而支持更好的灵活性，那么您的作品(以及您的 用户) 都会受益。
1.3.3 两个需要克服的障碍
稍后，我将给出一些方法，用以解决使用关键字时因浏览器的不同而出现的显示差异。不过首先，我得提一下 Netscape 4.x 和 IE5/Win 在处理这些差异时存在的两个主要问题。
1. Netscape 4.x
很遗憾，即使是在默认的中等字号的设置下，Netscape 4 显示的文字仍然会偏小， 甚至小到难以看清楚的程度。由于这个问题很严重，因此在针对 Netscape 4 使用 CSS 设置文字大小时，最好不要使用关键字。(更多信息，请参见 www.alistapart.com/ articles /sizematters)然而，我们也不必太担心这个问题，因为对于这样古老的 浏览器，我们还不如干脆屏蔽掉所有的 CSS 样式( 本书中的所有范例都会如此) 。好， 克服了第一个障碍。
2. IE5 Windows
第二个障碍要更棘手些，因为在本书写作时，还有相当多的用户仍然在使用 IE5/ Win，针对这种浏览器，继续完全屏蔽 CSS 样式未免显得不够成熟。IE5/Win 的这个 问题恐怕是它的开发者犯的一个明显错误。
和其他良好支持 Web 标准的浏览器相比，IE5 中关键字的显示结果总是要整整大一 号(其中的原因恐怕只有微软公司才能解释了)。例如，在浏览器的文字大小设置为默认值时，我们声明如下样式：
body {
font-size: small;
}
|
在 IE5 Win 文本中，文字却会显示为 medium 的大小。这违背了我们的初衷。图1-4 显示了在同样使用 small 时，IE5 和 IE6 中实际显示效果的差别。
 |
|
图 1 -4 比较这两幅图，IE5 /Win 在显示设定为关键字值 small 的文字时， 比IE6(以及其他同级别的浏览器)要大了一号 |
要避免这个问题，以及让所有的浏览器和设备在访问同一个页面时能显示差不多相同的文字大小，我们需要利用 CSS hack，以便我们可以为 IE5/Win 和其他浏览器分别设定规则。于是，相比于其他浏览器，我们可以专门为 IE5/Win 指定一个小一号的关 键字值。这样就能保持页面显示效果的一致性了。
3. 针对 IE5/Win 的 hack
为了给IE5/Win指定一个比我们原本意向中再小一号的font-size，我们使用著名 的Box Model Hack(框模型Hack)，它由Tantek Celik(www.tantek.com/CSS/ Examples/ boxmodelhack.html)发明，可以欺骗 IE5/Win，使它以为 CSS 声明已经结束。得益 于这个“神秘巫术”，我们能够首先为 IE5 /W in 声明一个小一些的值，然后，对于兼 容的浏览器，用我们原本意向中的文字大小值覆盖掉这个声明。
假设我们的意向大小值是 small，那么给<body>中的内容设定的一些必要的 CSS规则会像下面这样：
body {
font-size: x-small; /* for IE5/Win */
voice-family: "\"}\"";
voice-family: inherit;
font-size: small; /* for compliant browsers */
}
html>body { /* be nice to Opera */
font-size: small;
}
|
您会注意到，我们打算设定一个基准 font-size，使用关键字值 small，我们 还针对IE5/Win 声明了小一号的值，然后用下列代码使IE5/Win 以为CSS 声明已经结束：
voice-family: "\"}\""; |
只有 IE5/Win 能识别出这个结束大括号，于是它会认为 CSS 规则的声明已经结束。 对于其他所有兼容浏览器，我们在后面用 small 覆盖了 x-small。于是，现在我们 就得到了一个相对一致的基准文字大小。
在上例中还会注意到第二个声明，一个完全一样的指定 font-size: small的规 则。在注释中，我称这个规则为“对 O p er a 友好”的规则，因为它能防止 O p er a 浏览器(以及某些其他浏览器)潜在地忽略掉 hack 代码之后的规则。如果使用了 Box ModelHack，这句声明就应该也要用上；它本质上确保了所有的兼容浏览器都能完整读取样 式表中的下一条声明。
1.3.4 简化的 Box Model Hack
简化的Box Model Hack(SBMH)由Edwardson Tan 发明，用更少一些的，以及语法上更容易 理解的代码实现了相同的结果(能为IE5/Win和所 有其他浏览器指定不同的值) 。
这次我们使用 SBMH，那么我们前面的例 子就会是这样：
提示：要了解关于使用关键字和上述技巧性补救办法的更多信息，请参 见 Todd Fahrner 发表在 A List Apart 杂志上的一篇详细的文章( w w w . alistapart.com/articles /sizematters/)。
body {
font-size: small;
}
html body {
font-size: x-small; /* for IE5/Win */
f\ont-size: small; /* for other IE versions */
}
|
首先给<body>对象设定正常的声明，使用我们意向中的 small 值。然后，由于IE 中的一个 bug，可以通过使用 *html 选择器来提供专门用于 IE 浏览器的声明。IE5/Win忽略 font-size 属性中的反斜杠，因此可以放心地为它设置 x-small 值，然后，针对其他版本的 IE，再用 small 值将 x-small 值覆盖掉。
我们实现了和使用起初的 Box Model Hack 一样的结果，但是这个版本的语法相对 简化，对于刚刚开始学习这个方法的人来说也许更容易掌握。(关于 SBMH 的更多信息， 请参见www.info.com.ph/~etan/w3pantheon/style/modifiedsbmh.html)。 您可能会觉得使用 Box Model Hack 有点麻烦，花了很多功夫却只为纠正一个文本显示大小的问题。但是，如果确实想要获得页面表现上的一致性，就不得不付出代价。
好在有一些方法，可以策略性地将所有的 CSS hack 以及技巧性补救办法集合起来， 把它们和简洁的样式表分离开—— 我们在第 9 章中将会看到其中的某些方法。
| 回书目 上一节 下一节 |
|
· Linux笔试面试题选摘测.. · 08年5月软考网管上午真.. · 性能测试从零开始 目录 · 08年5月软考网工上午真.. · 上周拒绝服务攻击（DDo.. · 08年5月各大网上书店及.. |
· 2008年5月24日软考试题.. · 软件设计师专家临考模.. · 上周网络管理员专家自.. · 网络工程师自测获奖名.. · 08年4月各大网上书店及.. · 系统分析师自测获奖名.. |
|
|||
| 名称：SQL Server数据库管理精品黄皮书 简介：书中文章经过精挑细选，便于用户能根据自己的实际工作和学习，快速在本书寻找到相关资料。内容涵盖了SQL Server的安装与升级、语句查询、数据备份和恢复、自动化任务、数据同步、数据字典、安全和预防、性能和优化、集群等各方面应用信息，以及DBA管理人员在数据库管理工作中 |
|||
| 名称：2007路由技术大全 简介：《2007路由技术大全》由51CTO.com网站特别策划制作，该书包括路由器技术、路由器产品、路由器配置、安全设置、路由器故障处理、路由器密码恢复，以及广大网友在实践使用中的心得经验和技巧文章，内容注重实用性，适用于初学者入门，也适合多年从业者提高，是一本实践和理论完 |
|||
| 名称：网络安全精品应用黄皮书 简介：《2007精品网络安全黄皮书》包括了9个大类24个小类， 800余篇文章，内容包含了熊猫烧香病毒、DDOS攻击、ARP病等热点问题的介绍及解决方案。从病毒查杀、防范、系统、数据等各方面的安全设置到黑客技术的了解、防范，涉及到了安全应用的全部领域, 由浅至深内容全面。 |
|
||||
| · SOA 面向服务架构 · SQL Server 2008/2005.. · Apache技术专题 · 三层交换技术专题 · SQL Server入门到精通 · Apache技术专题 · Windows集群服务应用 · 国际文档格式标准开战 |
· 路由器设置与口令恢复 · Linux 集群技术专题 · PHP开发应用手册 · SOA 面向服务架构 · 企业数据恢复指南 · 了解统一威胁管理(UTM).. · 专题：AIX操作系统管理.. · 访问控制列表(ACL)介绍 |
|||
|
||||
| · SQL Server入门到精通 · SQL Server 2008/2005.. · SOA 面向服务架构 · Apache技术专题 · 三层交换技术专题 · Apache技术专题 · 企业数据恢复指南 · Windows集群服务应用 |
· 路由器设置与口令恢复 · Linux 集群技术专题 · SOA 面向服务架构 · 了解统一威胁管理(UTM).. · 反垃圾邮件技术应用 · 访问控制列表(ACL)介绍 · ASP.NET开发教程 · PHP开发应用手册 |
|||
