Ghost全自动系统备份光盘正式版 V4.5 | 硬盘版 V2.0 | 排行榜 TOP50 | 图文推荐 | 玩小游戏
首页 >> 网页设计 >> CSS/HTML专区 >> CSS 表格元素内容的定位 0

CSS 表格元素内容的定位 0

作者:grace 来源:gracecode.com 时间:2008-8-1 网友评论条 【

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--

站长工具
英文域名注册及Whois查询:
相关文章
loading 请稍等,评论加载中...

Aspxhome.com. 中国Asp之家. 版权所有

闽ICP备06017341号