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.
另,感谢 圆心提供另个参考 ( 来源 )
The effect of 'position:relative' on table-row-group,
table-header-group, table-footer-group, table-row,
table-column-group, table-column, table-cell, and
table-caption elements is undefined.
可以认为定位的父容器应为块(block)元素(td 默认的 display 属性为 tab-cell),从上面的内容可以看出,针对'position:relative'
这一属性对于大部分的表格元素(display:table-*
)而言是未定义的,而 Exploer 则没有遵循这一规范(所以得到了「期望的结果」)。
其实将 DEMO 中的相应 td 的 CSS 属性改成 display:block;
就能更好的说明问题(注意,将 td 的 display 属性改成 block,严格意义上理解,它已经不是表格的一部分)。
要解决这问题,目前已知的一种做法就是在 td 中再套一层 div 等 block 元素。
这可能这又引起的另个问题,就是无法像表格元素一样垂直居中,不过我们 可以参考这里的解决方案 (更新, 还有 小虎 的另种解决方案 )。
--EOF--