CSS 表格元素内容的定位 0

CSS 中的 position 属性可以很容易的将指定的元素定位到理想的位置。但在使用这一属性时需要注意，尤其是在表格元素中。为了说明此问题，我们先来看个 DEMO。

点击按钮后，图片所在的 td 的 CSS 属性 position 定义成 relative，但是除 Exploer 外其内部的绝对定位的层，没有重新定位到“期望的位置上”。

在这里有个详细的讨论，主要的原因可以基本上认定为 Exploer 与其他浏览器针对表格元素的理解不同所致。

根据 W3C 的相关描述

The position and size of an element's box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element.

可以认为定位的父容器应为块（block）元素（td 默认的 display 属性为 tab-cell），而 Exploer 则没有遵循这一规范（所以得到了“期望的结果”）。

其实将 DEMO 中的相应 td 的 CSS 属性改成 display:block; 就能更好的说明问题（注意，将 td 的 display 属性改成 block，严格意义上理解，它已经不是表格的一部分了）。

要解决这问题，目前已知的一种做法就是在 td 中再套一层 div 等 block 元素。

这可能这又引起的另个问题，就是无法像表格元素一样垂直居中，不过我们可以参考这里的解决方案（更新，还有 小虎 的另种解决方案）。

--EOF--