html - 在 <a href...>text</a> 标签对之后，css 格式不会返回到以前的格式

Question

我的页面格式不正确，或者至少没有按照我的预期进行格式设置。

下面是代码的简化版本。

<div ...>
  <div class="db_notes">
    <pre>
Some Text. 
<span class="blue">Lots more text that may be one line or multiple lines and is
retrieved from a database in preformatted form and often has one or more 
<a href="...">links</a> within the preformatted text.</span>
Some Additional text.
<span class="blue">More text that may be one or more lines and is reformatted 
and comes from a database and often contains one or more <a href="...">links</a> 
within the text.</span>
And more text.
    </pre>
  </div>
</div>

只有字体颜色被<span class="blue">改变了.

<span class="blue">之间的文字颜色和 <a href...>是蓝色的(根据需要)，但是 </a> 之间的文本颜色和 </span>是黑色的(而不是蓝色的)。

关于原因的任何想法，在 </a> 之后标签，文字颜色没有变回蓝色？

谢谢!

约翰

* 更新 *

首先，感谢所有创建示例来测试 标签后的颜色应该是蓝色的前提的人!你证明我没疯! (或不完全疯狂)。

我复制了 JS Bin 上的示例，并在复制页面上粘贴到页面的主要部分，但存在文本颜色问题。令我惊讶的是， 标记后的文本是蓝色的，它应该是蓝色的。

接下来我查看了 CSS 以找到任何可能影响 div、span、a 或 pre 标签的样式元素，并将它们放在 JS Bin 上的 CSS 部分。生成的格式看起来仍然正确， 标记后的文本仍然是蓝色。

然后我复制了整个CSS文件并将其粘贴到JS Bin上的CSS部分。那打破了它。 标记后的文本变为黑色，这是我在使用该页面时遇到的问题。

所以，在这个庞大的 CSS 文件中的某个地方，有一些东西正在影响这个页面的呈现方式。为什么，我不知道。我一直认为，在行内结束标记之后，格式应该返回到开始标记之前的格式，但不知何故有些东西正在改变这种行为。

现在是凌晨 2 点 15 分左右，所以我打算收工了，睡一觉，休息一会后再重新看一下。

约翰

* 更新 *

我检查了整个页面，确保所有标签都匹配，嵌套正确(SPAN 内没有 DIV 元素等)，但它的格式仍然不正确。

我不能再花时间在上面了，所以我想出了一个办法——关闭 之前的 span 并立即打开一个新的 在之后，如下图。我知道这不是必需的，但如果这是让它发挥作用所需要的，那就这样吧。所以，这里是修改后的简化代码。

<div ...>
  <div class="db_notes">
    <pre>
Some Text. 
<span class="blue">Lots more text that may be one line or multiple lines and is
retrieved from a database in preformatted form and often has one or more 
</span><a href="...">links</a><span class="blue"> within the preformatted text.</span>
Some Additional text.
<span class="blue">More text that may be one or more lines and is reformatted 
and comes from a database and often contains one or more 
</span><a href="...">links</a><span class="blue"> 
within the text.</span>
And more text.
    </pre>
  </div>
</div>

我仍然想知道为什么浏览器会以这种方式运行。如果有人对导致格式在 标记后崩溃的原因有任何想法，我很乐意听取他们的意见。

谢谢，

约翰

Answer 1

我无法进入另一个元素的源代码文件(锁定编辑)，所以在等待的时候我又看了一眼问题页面。

在 Firebug 中查看页面时，我注意到虽然页面源只有一个 标记，但 Firebug 显示显示该标记的多个实例。奇怪。

然后我仔细观察，发现没有 标签匹配 标签。

替换后:

<a name="top">

与:

<a name="top"></a>

页面运行正常!!!

有时网站需要更新以替换:

<a name="top"></a>

...和其他“a name=”标签:

<a id="top"></a>

...符合 HTML 5 的标签，但有 2,300 多个动态页面，大多数有 1 到 30 个 标签，要花很长时间才能为这样的元素提供资金努力。需要支持某些标签和选项以实现向后兼容性的另一个原因。

再次感谢所有以任何形式提供帮助的人!

祝愿

约翰