编辑器中的代码看起来不错，在浏览器中它会改变答案

【问题标题】：Code in editor looks fine, in browser it changes编辑器中的代码看起来不错，在浏览器中它会改变
【发布时间】：2012-08-16 11:02:29
【问题描述】：

我有这个奇怪的问题。

当我在 div 周围包裹锚标记时，html 标记完全改变.. 清除缓存和所有内容。

它是关于带有类传出链接的锚

代码编辑器中的Html（正确代码）：

<a class="outgoing-link" href="#">
    <div id="content-element">
        <div class="top-info">
            <span class="title-provider">Vodafone</span>
            <img src="phone-placeholder.png" 
                 alt="placeholder" 
                 width="58px" 
                 height="50px"/>
            <div class="bg-circle"></div>
            <span class="dur-discount">1e 3 maand</span>
            <span class="price-discount">&#8364; 16,50</span>
            <span class="dur-normal">Daarna</span>
            <span class="price-normal">&#8364; 20,00</span>
        </div>
        <a href="#" title=""><h3>iPhone 4GS abonnement</h3></a>
        <p><span>100</span> min & sms <span>500</span> mb</p>
        <p><span>2 jr</span>telefoon abonnement</p>
        <p>Prijs telefoon: <span>Gratis</span></p>
        <div class="hover-extra-info">
             <p>Aansluitkosten: <span>&#8364; 24,95</span></p>
             <p>Vodafone abonnement</p>
             <p>aanbieder: Student Mobiel</p>
             <p>Totale kosten over 2 jaar</p>
             <p>&#8364; 547,22</p>
        </div>
    </div><!-- end content-element-->   
</a>

浏览器中的代码：

<a class="outgoing-link" href="#"></a>
    <div id="content-element">
        <a class="outgoing-link" href="#">
            <div class="top-info">
                <span class="title-provider">Vodafone</span>
                <img src="phone-placeholder.png" 
                     alt="placeholder" 
                     width="58px" 
                     height="50px"/>
                 <div class="bg-circle"></div>
                 <span class="dur-discount">1e 3 maand</span>
                 <span class="price-discount">&#8364; 16,50</span>
                 <span class="dur-normal">Daarna</span>
                 <span class="price-normal">&#8364; 20,00</span>
             </div>
         </a>
         <a href="#" title=""><h3>iPhone 4GS abonnement</h3></a>
         <p><span>100</span> min & sms <span>500</span> mb</p>
         <p><span>2 jr</span>telefoon abonnement</p>
         <p>Prijs telefoon: <span>Gratis</span></p>
         <div class="hover-extra-info">
         <p>Aansluitkosten: <span>&#8364; 24,95</span></p>
         <p>Vodafone abonnement</p>
         <p>aanbieder: Student Mobiel</p>
         <p>Totale kosten over 2 jaar</p>
         <p>&#8364; 547,22</p>
     </div>
</div><!-- end content-element-->

它添加了另一个链接并将它们放在错误的位置。

关于发生了什么的任何想法？还是我只是错过了什么。

任何帮助将不胜感激:)

【问题讨论】：

检查你的 HTML，嵌套从来都不是一件好事

标签： html

【解决方案1】：

我认为这是因为嵌套的锚标签是非法的

见：http://www.w3.org/TR/html401/struct/links.html#h-12.2.2

在保持功能不变的同时，不用嵌套锚标记应该很容易。

【讨论】：

嗯，我想我会尝试使用 jquery 或其他东西来使 div 成为链接。
这当然是可能的，但是为什么你需要将这个 div 包裹在一个锚标签中呢？

【解决方案2】：

可以尝试自动修复无效的 HTML (=> Quirksmode ?)，因为 achor-tag 不应包含 -Tags。

尝试在文件开头添加 DOCTYPE 语句，这会改变行为吗？

Doctype-Statement（必须在 HTML 文件/输出的第一行）可能是这样的：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                      "http://www.w3.org/TR/html4/loose.dtd">

【讨论】：