最初只是想不使用JS来实现这样一个简单的效果。

代码是这样的：

<a href=”#” class=”show_box”>
<img src=”test.jpg” />
<p>这是一段测试文本，欢迎访问我的博客</p>
</a>

对于这样一个效果可能我们还不太满足，通常我们还想为扩展信息提供一些链接，所以我们把代码做如下修改：

<a href=”#” class=”show_box”>
<img src=”test.jpg” />
<p>这是一段测试文本，欢迎访问<a href=”http://omiga.org”>我的博客</a></p>
</a>

仅仅是为一段文本添加了一个链接，但是随之而来的问题是十分严重的，为便于更清楚地分析问题，我们将<img>标签去除（演示效果）：

<a href=”#” class=”show_box”>
<p>这是一段测试文本，欢迎访问<a href=”http://omiga.org”>我的博客</a></p>
</a>

我们分别在FF，Safari，Opera，IE6，IE7查看页面效果，均出现了虽不一致但却存在某种内在联系的“不良反应”，相同代码在FF和Safari中的表现一致，在Opera,IE7和IE6中的表现各异，具体症状不再描述。在FF中用FireBug查看DOM结构：

<a class=”show_box” href=”#”/>
<p>
<a class=”show_box” href=”#”>这是一段测试文本，欢迎访问</a>
<a href=”http://omiga.org”>我的博客</a>
</p>

FF自动地将我们的原始链接（<a href=”http://omiga.org”>我的博客</a>）前的文本也设置为链接，并为其赋予样式“show_box”。

我们再将代码做如下修改（查看效果）：

<a href=”#” class=”show_box”>
<p>欢迎访问<a href=”http://omiga.org”>我的博客</a>，这是一段测试文本</p>
</a>

然后FF仍然对源代码进行了某种修改：

<a class=”show_box” href=”#”/>
<p>
<a class=”show_box” href=”#”>欢迎访问</a>
<a href=”http://omiga.org”>我的博客</a>
，这是一段测试文本
</p>

结果依然是为文本“欢迎访问”设置为链接，并赋予样式。我们似乎看到了某些FF修改代码的规律。

继续对源代码做如下修改（查看效果）：

<a href=”#” class=”show_box”>
这是一段测试文本欢迎访问<a href=”http://omiga.org”>我的博客</a>
</a>

再次查看最终生效的代码：

<a class=”show_box” href=”#”> 这是一段测试文本欢迎访问</a>
<a href=”http://omiga.org”>我的博客</a>

同样将原始链接“我的博客”前的文本设置为超链接，但是原始链接“我的博客”却不在包含在最初的结构内，见上述两段代码。原本似乎有规律的代码转换原则似乎又没有了？我们仔细分析以上几段代码不难发现，当<a>标签内部又出现<a>标签时，FF会试图将第一个内嵌<a>标签前的文本写入其父层<a>内，并将其关闭，同时解除其与内嵌标签的层级关系而成为原内嵌<a>的兄弟节点。但当内嵌<a>标签并不是直接地嵌套在<a>中时（其外层还存在<p>标签将其嵌套），FF还是试图将最外层的<a>标签关闭，同时解除层级嵌套关系，并将内嵌<a>标签前的文本转换为链接。但是这里似乎发生了一点意外——<a class=”show_box” href=”#”/>，<a>不是这样关闭滴呃～···

由于各浏览器最终呈现的页面并不尽相同，我们难以分析具体原因，但有一点是肯定的，那就是浏览器都对原代码进行了某种修改（或者说完善？），但是最终效果却不是我们想要的～我想这与<a>标签的特殊性有莫大关系，众所周知，<a>不同于其他标签，当为其赋予href属性，将会创建到另外一个文档的链接；当为其赋予 name或id 属性时，将创建一个文档内部的书签。可能正是基于这些特殊性导致了<a>标签在嵌套结构中的异常，所以最后结论只有一个——<a>标签嵌套不能用！同时应最大可能地减少对HTML/XHTML标签样式的重写！

测试浏览器：FF2，Safari3，Opera9，IE6，IE7