CSS 中的 position 属性可以很容易的将指定的元素定位到理想的位置。但在使用这一属性时需要注意,尤其是在表格元素中。为了说明此问题,我们先来看个 DEMO。
点击按钮后,图片所在的 td 的 CSS 属性 position 定义成 relative,但是除 Exploer 外其内部的绝对定位的层,没有重新定位到“期望的位置上”。
在这里有个详细的讨论,主要的原因可以基本上认定为 Exploer 与其他浏览器针对表格元素的理解不同所致。
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--
请稍等,评论加载中...