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"