单个HTML锚标记实际呈现TWICE！截图

我在 HTML和CSS的第二次尝试中有10行,它立即完成了一些完整的事情.

我有以下代码(这整个页面)：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
        <title>Some page title</title>
        <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.1.1/build/cssreset/reset-min.css" />
        <link rel="stylesheet" type="text/css" href="47926.css" />
        <link rel="stylesheet" type="text/css" href="960Clear.css" />
    </head>

    <body>
        <div id="rootDiv">
            <div class="container_16" id="topBarDiv">
                <div id="topBarLogoDiv">
                    <a id="topBarLogoLink" href="~/Home/ComingSoon" title="Coming soon page"/>
                </div>
            </div>
        </div>
    </body>
</html>

这里是CSS(960Clear.css,其他是960网格和YUI重置)：

#rootDiv {
    height: 70px;
    background-color: #F7F7F7;
}

#topBarLogoDiv {
    background-image: url('file:///C:/Users/Public/Documents/~Main/Vuplan/S26.Vuplan.Web.Application/Images/logo-vuplan-color-on-alpha-172x49.png');
    background-color: #F7F7F7;
    background-repeat: no-repeat;
    margin-left: 20px;
    height: 50px;
    width: 172px;
    display: block;
    overflow: hidden;
}

#topBarLogoLink {
    height: 50px;
    width: 172px;
    min-height: 50px;
    min-width: 172px;
    display: table-cell;
}

这个简单,简单的页面不起作用. Internet Explorer是我最初的问题,在最上面的角落最多可以渲染四个徽标,但是现在让我们忽略Internet Explorer,因为即便是Firefox也在做最疯狂的事情.

我在包装div之外渲染另一个整个锚元素,这个奇怪甚至可以作为F12 diag工具窗口中的另一行代码看到！

我拍了一个屏幕截图来证明：

http://0olmuq.bay.livefilestore.com/y1pxx75x_th_V0FX15uiLSOAK7MbKnHOQ17L9WMLg4K1TrIoZ0_xEaTgveh0_xF0S8o1Ae8WVvQLNWjQzyGl5AXsPpMV9MW0aDI/One%20Anchor%20Tag%20Renders%20Two%20Anchor%20Tags%20Crap.jpg?psid=1

对我来说,HTML CSS工作是在地狱服务,但这需要饼干.地球上到底发生了什么？

注意

我的错 – 我之前应该添加这个免责声明.

上面的代码似乎让一些人感到困惑.请记住它处于实验状态,因为我试图弄清楚为什么我会得到多个徽标和一般的奇怪.

我没有纠正本地链接(生产完全不同,无论如何通过ASP.NET MVC方法生成).

想象一下,有人在管道房子时遇到问题,你去调查.房子可能尚未完工;请忽略丢失的地毯;-)

解决方法

您无法使用/>关闭A标记你需要用< a href =“#”>链接< / a>来关闭它

双重渲染是Firefox / Firebug解析无效的HTML.

单个HTML锚标记实际呈现TWICE！截图

解决方法

相关文章