CSS 表格元素内容的定位 0
作者：grace 来源：gracecode.com 发布时间：2008-08-01 17:31:00
标签：表格,定位,css
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--
0
投稿猜你喜欢
- 1、删除Oracal在注册表中的主项：regedit.exe->LocalMachine->Software->Oracl
虽然淘宝商城的名字中带有“商城”两字，但是很显然的，淘宝商城并不是一个B2C商城，淘宝商城仍只是一个C2C平台，充其量只是个收费版的淘宝。在- 1.指向“开始->程序->Microsoft SQL Server 2005->配置工具->SQL Server 外
- 感谢人类方方面面的创新，今天Web开发已经不需要在如何设计网站上面浪费时间了。框架和库帮助web开发者得以专注于真正的开发工作上。下面的这些
- XML文档对象模型（DOM）是什么？可扩展标记语言XML的基础是 DOM。XML 文档具有一个称为节点的信息单元层次结构；DOM 是描述那些
- 纯粹的截取字符串其实比较简单,用一个Left就搞定,但一个是全英文标题,一个是全中文标题,或中文混合排在一起,长短不一就很明显了,要考虑到中
- 作为设计主管，Peter Stern 已经领导 microsoft.com 重新设计了主页并且开发了五个不同的交互工具，这些工具被用于下载中
- 阅读上一篇：一个完美网站的101项指标.第六部分.性能 符合 W3C 标准是网站的发展趋势，目前，几乎所有的浏览器都使用 W3C 标准，W3
- 1、su – oracle 不是必需，适合于没有DBA密码时使用，可以不用密码来进入sqlplus界面。 2、sqlplus /
- 如何实现优惠打折？ 代码及说明见下：<％@ LANG
- fso对象CreateTextFile方法调用时可能会报“无效的过程调用或参数”错误，在使用ASP生成静态页面时，如果传入的字符串参数编码为
- 如果你的PHP网站换了空间，必定要对Mysql数据库进行转移，一般的转移的方法，是备份再还原，有点繁琐，而且由于数据库版本的不一样会导致数据
- 设置MySQL数据同步（单向&双向）由于公司的业务需求，需要网通和电信的数据同步，就做了个MySQL的双向同步，记下过程，以后用得到
- 可能接触网站与编程设计的人都知道，一个属性值需要引号包括起来，但是有的时候就是因为没有正确设定引号类型，导致程序出错，就连我自己也是这样，我
- 内容摘要：在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本
- session请求过程当第一次访问网站时，Seesion_start()函数就会创建一个唯一的Session ID，并自动通过HTTP的响应
- YUI 中的 Grids CSS 主要有三个部分值得大家关注和学习：Yahoo!网站性能最佳体验的34条黄金守则—内容 1、布局的思想：使用
- 如何编写一个只在Web服务关闭时执行的程序？如：<SCRIPT LANGUAGE="VBScript"&
- 随滚动条移动的DIV层js代码，无论你的滚动条到哪里这个DIV层就跟到哪里！代码中例举了五个方向的滚动div层例子：包括左上方的div，左下
- 代码如下:<％@LANGUAGE="VBSCRIPT" CODEPAGE="936"
