这篇翻译不完整。请帮忙从英语翻译这篇文章

本文所介绍的技术不再是Web开发的最佳实践。现在推荐用CSS布局。 但是当开发者不能确定用户使用的是一个现代浏览器时是有用的,比如基于HTML的e-mail消息。

无论何时你开始创建一个网页,当其设计是基于经典的“表格和多图像时”你的烦恼是相当多的 。 不管你是切一个图标去很好的适应设计, 或者使用大量的单像素GIFs间隔, 这些原理都是大同小异的. 在较早的时候, 这种方法是能很好工作的, 因为浏览器可以将表格单元的宽和高设置成其包含的图像的大小一样。

到了2001年的时候, 以及基于标准的浏览器的兴起,它们使用HTML和CSS而不是自己的私有布局算法来布局页面. 感谢CSS规范的一个不起眼的小特性, 基于表格的精确小图像布局已经是一个可以预见的灾难了。 这完全取决于现代浏览器的正确DOCTYPE, and kaboom!

组件

让我们来好好的看看这个问题, 和为什么这会成为一个问题. 我们来看一个简单的例子, 如图1: 一个表格包含了一个图片.

Figure 1

显然大多数的设计都比这更加的复杂,但是在这里我们必须要那些东西。一个图像和一个表格就已经够了。这个例子没有什么明显的错误。这不应该是这样的,因为其实浏览器的默认行为。

现在让我们看看同样一个例子在具有严格DOCTYPE声明的现代浏览器上的表现。

Figure 2

注意图片下面出现了一个空格。 原来的表格的标记并没有改变-- 这是因为渲染模型发生了改变。 浏览器现在渲染的是图像所在的行,而不是直接渲染图像本身,图像在行内,而图像默认是内联元素,所以发生了上面的情况。

如何创造内联内容

为了理解这种情况是如何发生的, 让我们来看一看行盒子的结构,图像在行盒子内, 而行盒子在一个表格中, 如图3所示,一个标准的行盒子包含有文本内容。

Figure 3

图三中最值得我们注意的是基线 (图中的蓝色线), 其在行盒子中。 基线的确切位置取决于线框的“默认”字体(由红色框表示),其由包含行框的元素的font-family的值确定. 基线的位置不能由人为改变。所以他的位置就在那儿。基线之下的空格被称为“下降空间”,因为这样就可以绘制小写字母如“j”,“y”和“q”的下降字符串。图4显示了当将图像添加到混合中时会发生什么。

Figure 4

请注意图像默认位置:其底边与线框的基线对齐。可以使用垂直对齐方式更改此位置-- 我们等会再来讲这个问题-- 但几乎没有人将其默认值改变。我们拿走文本,只留下图像,如图5所示。

Figure 5

所以我们有一个图像坐在只包含图像的行框的基线上. 现在考虑当我们把这个行放在表单元格中时会发生什么(图6)。

Figure 6

所以空格出现了--以前从未出现的空格. 在小图像下他更糟糕, 如图7所示的一个像素高的图像。

Figure 7

现在有各种各样的意外空格。足以让设计师疯狂。

怎样修复它?

显而易见的方法-- 停止创建基于表格和切片的单像素图像-- 但这对于许多设计师来说并不是很实际,它确实不会帮助修复最近浏览器中突然爆裂的旧设计. 还有一个明显的修复方法,就是确保你的文档不会触发“标准”渲染模式。

你可以使用 DOCTYPE 来触发 "quirks" mode 或者 "almost standards" mode, 或者在你的文档中移除DOCTYPE声明. 缺少DOCTYPE将阻止验证,因此不推荐。对于使用遗留文档的作者,DOCTYPE的 "quirks" 模式是一个最好的选择。 在作者正在撰写新文档或尝试将设计迁移到尽可能基于标准的情况下,“几乎标准”模式可能是更好的选择。

当然,XHTML Strict或HTML Strict创作的文件将触发“标准”渲染模式,因此我们将通过两种基本方法来解决严格的文档中的问题,以及一些方法来调用这些“修复“。

将images设置为block元素

第一选择,以及最适合大多数图形强烈设计的选择,是将图像从内联元素转换为块级元素。这样做,它不再生成一个线框,所以问题消失了 - 假设图像是唯一占据该表格单元格的东西。在最简单的情况下,我们可能会添加如下样式:

 td img {display: block;}

考虑这个规则将应用在如下的标记中:

<table cellspacing="0" cellpadding="0" border="0" width="500">
<tr><td><img src="nav1.gif"><img src="nav2.gif"><img src="nav3.gif"><img
src="nav4.gif"><img src="nav5.gif"></td></tr>
<tr><td style="background: red;">
<img src="smallred.gif" height="1" width="1"></td></tr>
<tr><td>
<p style="margin: 0.5em;">This is text in another cell of the
 table.  Within the textthere is an icon <img src="icon2.gif">
 that indicates a link to another site.  It's very worldly.  Lorem
ipsum, dolor sit amet...</p></td></tr></table>

如图8所示,他在一些情况下表现很好但是在另一些情况下则不是。

Figure 8

细红线表明单像素间隔GIF现在只使单元格高一个像素, 正如预期一样。 不幸的是,顶部单元格中的按钮现在都是块级别,因此最终堆叠在另一个顶部,而不是并排显示。

一个潜在的解决方案是将一个类添加到需要为块级别的任何图像上,然后写入匹配的规则。

td img.decoration {display: block;}

<td><img src="reddot.gif" class="decoration"></td>

然而,根据设计,这可能会导致为这一个简单的效果添加了很多类。如果有许多单像素单元旨在创建酷堆叠线,或类似的一些东西,这将尤其如此。 如果您的标记适用于此方法,则可以对表行进行类,而不是映像。因此你可能有:

tr.decoration img {display: block;}

...以及标记中的以下更改:

<tr class="decoration"><td style="background: red;">
<img src="smallred.gif" height="1" width="1">
</td></tr>

其结果是仅使间隔GIF块级别,从而使其他图像单独存在。这导致图9中的结果。

Figure 9

或者,您可以将表格单元格替换为行,如果这是更好的选择。 然而,在任何这些情况下,如果您的表格单元格不仅仅是单个图像,那么使图像块级别可能会产生意想不到的副作用,如图8所示。

当然,当我们在图9中有一个单像素间隔单元时,在顶部的导航按钮下方仍然有不需要的空间。 摆脱这个空间可以像将每个图像放在自己的单元格中一样容易,并使它们都是块级的,但是让它们放在一个单元格中,所以我们可以说明另一种方法。

用 vertical alignment

另一个主要选择是将图像内联并改变图像相对于线框的垂直对齐方式。例如,您可以尝试以下操作:

td img {vertical-align: bottom;}

这将导致图像的底部边缘与线框的底部对齐,而不是基线。 如图10所示,这具有预期的效果:我们的导航栏图像下的空间已经消失。 然而,装饰细胞仍然太高,并且其他图像相对于它们周围的文本不对准。

Figure 10

再次,我们可以对图像,单元格或行进行分类,以缩小效果的焦点。 然而,上面所示的样式不能克服单像素图像的问题,因为它们周围的线框将是表格单元格的字体大小的高度,因此不会缩小。 图像将移动到单元格的底部,但单元格不会“缩小”图像。 另外,比线框短的任何其他图像都很高,在它周围仍然会有空间 - 就像红色间隔单元一样。 单元格中的单像素图像现在与单元格的底部对齐,但是行框返回,它是正常文本的大小。

参见例如图11,其中文档的字体大小已经被提高到大量。导航栏图像现在有空间出现在它们之上,而红色的隔片变得更大。

Figure 11

很难避免这种情况,因为图像(在这种方式)仍然是内联的,因此仍然参与创建一个行框。如果线框足够高,则图像周围的空间将开始出现。

期待修复

感谢Mozilla对CSS2的全面实施,CSS工作组注意到表单中的内联图像强制打开不需要的空间的问题。 已经有很多建议来解决这个问题,但是最有希望的方法之一就是包含在CSS3中的 line-box-contain, 如果该属性被采用,那么任何支持它的浏览器都可以模仿传统的“收缩包装”行为,而不会因为以下规则而导致其他布局不安的风险:

td {line-box-contain: font replaced;}  /* proposed for CSS3 */

目前的CSS3工作草案中还有其他可能的修复程序,例如line-height-policy。显然,可以找到并实现更快的解决方案,到处都是更快乐的作者。 

建议

对CSS3的支持不够,难以为每个固定问题提供一套明确的步骤,因为给定文档的最佳解决方案将在很大程度上取决于其结构。 如果您的文档使用过渡标记,请确保您的DOCTYPE反映该事实,并且不触发“标准”模式。 这将阻止浏览器使用基于标准的渲染,因此避免了所有的图像布局问题。 如果您使用严格的标记,或者您需要其他原因进行“标准”渲染,请记住以下准则:

  • 在单元格中单独的任何图像(例如,单像素间隔图像)应当被制成块级。
  • 任何具有其他图像的表单元格中的图像都应与线框底部垂直对齐。
  • 任何具有其他图像和文本的表格单元格中的图像都应该根据需要更改其垂直对齐方式(如果有的话)。

通过明智的混合方式和减少单像素图像技巧 - 在CSS功能的浏览器中,无论如何都是不必要的 - 这很有可能回避标准支持的这种奇怪的影响。 最好的解决方案可能是确保图像自身始终处于单元格中,从而允许作者使其成为块级,但一如以往将取决于作者的设计。

Original Document Information

  • Author(s): Eric A. Meyer
  • Last Updated Date: March 21st, 2003
  • Copyright © 2001-2003 Netscape.

 

文档标签和贡献者

 此页面的贡献者: chrisdavidmills, AlixWang
 最后编辑者: AlixWang,