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

由于「历史的问题」，我承认有时候会有意无意的避免使用 （X）HTML 特殊字符的使用。清早 无坏 兄弟就在群里吼，为什么这两个省略号会不一样？

经查，原来是左侧使用的是 … 这样的 （X）HTML 的特殊字符，而右侧的是，英文三个半角点（.）。再有个例子，我想到的就是 Google 首页的那个三角箭头，如图

按照本人第一眼的印象，我会将「更多」右侧的三角箭头做成背景。但是 Google 很「放心」地使用了

<small>&#9660;</small>

这样的特殊字符。我不确定 Google 这样做，是否仅仅是为了减少图片的加载量。但从某个侧面说明，Google 是个很「现实」的公司。

那么回过头来，个人观点是在尽可能的情况下，使用具有意义或者是有「特殊功能」的特殊字符。

首先，很多情况下，常用的特殊字符都会有相应的缩写，比如上述的 … 、÷ 等等。这种特殊字符的本身，我认为就是具有一定的语义的。

其次，特殊字符能帮我们的忙，比如可以参考 圆心 的一篇文章 。

当然，这样同时也是一种博弈的过程。正如早期有人会使用   加大间距一样，滥用特殊字符反而有害而无利。

众所周知，由于 Explorer7 以下的版本对于透明 PNG 的支持非常的不完善。这个问题甚至在一定的程度上，影响了 PNG 格式在 Web 中的使用。

所幸的是，已经有部分的解决方案，那就是「以毒攻毒」使用 Microsoft 的私有滤镜 （ 详细 ）。

用到 PNG 图片通常有两种方式，分别是图片和背景。在插入 PNG 图片方面，hack 的方法就是使用脚本将原图替换成原图，然后将 img 的 src 属性指向透明的 gif 文件（撑位置）。而在使用 PNG 背景中，就会有些许的问题。

根据官方的文档 ，对于 AlphaImageLoader 的描述如下：

AlphaImageLoader Filter

Displays an image within the boundaries of the object and between 
the object background and content, with options to clip or resize 
the image. When loading a Portable Network Graphics (PNG) image, 
tranparency—from zero to 100 percent—is supported. 

是的，我们 hack 时候加入的图片是处于背景（background）和内容（content）之间的一层。所以滤镜代替使用背景，不能完全实现背景的功能，比如 background-position 以及 background-repeat 等（如有解决的方案，请告知）。

综合上面所述，可以查看 DEMO 。jQuery 方面已经有个名叫 ifixpng 的插件 。

加入滤镜非常耗费系统资源的，尤其是处理大量图片的情况下。目前已知的情况下，可以使用两种方式载入脚本，第一种就是传统的 Javascript，第二种我也是后来才得知，就是使用 Explorer 的私有属性 behavior CSS 方法（ 详细 ）。

就个人的观点谈下这两种方法。首先使用传统的 Javascript 方法需要更改结构（加入 script 标签），而 behavior 方法则在 CSS 中指定，并不需要更改结构。同时，behavior 能更好的控制需要渲染的节点（使用 CSS 选择器）。

但 behavior 方法与 CSS expression 一样，需要注意效率问题（由于是 Explorer 属性，效率未知）。并在现有的情况下，CSS 的编写人员可能会对 behavior 方法感到迷惑。

总之，个人认为对于视觉效果方面的 Hack ，能不添加无谓的结构就不添加。正如上面的 behavior 属性可能会造成迷惑一样，在结构中加入某条 script 标签同样会使人迷惑，这是种博弈。

参考资料（部分链接已在文中提及）

• PNG 透明背景图片的无界应用
• behavior 使用说明
• 官方对于 crop 以及 scale 参数的说明.aspx)
• ifixpng Plugin for jQuery
• Angus Turnbull 的 behavior 引用方式
• HTC Reference.aspx)

-- Split --

后记，在实际测试可能性方案中，发现这两种载入方式的效率不尽相同。在使用 behavior 载入时，页面有明显的载入状态提示，如图

但是用 fidder 追踪发现并没有循环请求数据，如图

虽然出现此现象的原因未知，个人认为 Javascript 载入方式为统一循环渲染，而使用 behavior 时为使用 CSS 选择器获得，它是逐步渲染（了解明确原因的兄弟请告知，谢谢）。

而上述的测试可能有点极端 -- 我添加了 200 个节点。在日常的页面中，使用 behavior 属性情况不大（少于 10 个）、但背景要求质量很高（必须是 PNG，且还有透明）的情况下，还是可以考虑 behavior 属性的。

在 Explorer6 还未完全退出市场之前，加入条 CSS 语句就能解决透明 PNG 的问题（再加上针对 Explorer6 的 hack，其他版本的 Explorer 不受影响），也甚为方便。