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

Question

我在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之外渲染另一个整个锚元素,这个奇怪甚至在F12diag工具窗口中作为另一行代码可见!

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

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方法生成).

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

Answer 1

您无法关闭A标签,/>需要将其关闭<a href="#">Link</a>

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

Answer 2

首先,如果你知道你要编写错误的代码,至少让浏览器提前知道.使用doctype比原来更宽容strict(技术上这并没有真正做多,但我认为每一点都有帮助)

接下来,与大多数其他语言不同,网格框架和辅助工具实际上更适合中级和高级用户.CSS新手更容易被他们搞糊涂.(这是主观的,我知道,但这是很多人表达的观点,我们在这里给出建议,不是吗？)

现在为站点徽标.我认为这是个人偏好的问题,但通常会将标识标记为h1s.有多种方法可以实现你想要的东西,我只会给我习惯使用的方法:

HTML:

<h1>
  <a href="#">Site Name</a>
</h1>

CSS:

h1 {
  float: left;
  overflow: hidden;
}

h1 a {
  display: block;
  background: url('path/to/logo.png') no-repeat;
  width: 100px;
  height: 100px;
  text-indent: -9999px;
}

您的URL不正确:~/Home/ComingSoon并且file:///C:/Users/Public/Documents/~Main/Vuplan/S26.Vuplan.Web.Application/Images/logo-vuplan-color-on-alpha-172x49.png可能在本地工作,但如果要将其放在服务器上,则需要使用相对路径(假设您不打算使用服务器端脚本生成这些URL)

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

在min-height和min-width声明是没有用的:他们是唯一有用的,如果你不声明固定width和height.min-height和max-height属性以及它们的宽度对应物用于流体布局,其中设计者给予浏览器一定程度的灵活性以适应不同的屏幕尺寸和其他不可控制的因素.

该display: table-cell声明也有点可疑:如果您希望内联a元素扩展到其父级的大小,div您可以使用display: block

#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;
}

除了网址问题之外,背景颜色也不应重新声明 - 默认情况下,HTML元素具有透明背景颜色.display: block在这里声明也是不必要的--s div是块级元素.

哦,如果你对这个评论感到冒犯,我真的很抱歉.我真的是.考虑一下我弥补这一点,好吗？