Question

我有这个奇怪的问题。

当我在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-->

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

关于发生了什么的任何想法？或者我错过了什么。

任何帮助将不胜感激：）

Answer 1

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

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

在保持功能相同的情况下，没有嵌套的锚标记应该很容易。

Answer 2

可以尝试自动修复无效的HTML（=＆gt; 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">

编辑器中的代码看起来很好，在浏览器中它会改变

2 个答案: