代码之家 › 专栏 › 技术社区 › Luke Puplett

一个HTML锚标记实际上呈现了两次!截图

xhtml html

Luke Puplett · 技术社区 · 15 年前

我在第二次尝试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(960)清除.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;
}

这个简单的页面不起作用。InternetExplorer是我最初的问题,在上角最多呈现四个徽标,但我们暂时忽略InternetExplorer,因为即使是Firefox也在做最疯狂的事情。

我在wrapper div之外呈现了另一个完整的锚元素,这种奇怪的现象甚至可以作为

我拍了一张屏幕截图来演示:

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 方法)。

假设有人在给房子安装水管时遇到问题,你就去调查一下。房子可能还没完工,请忽略掉掉的地毯

3 回复 | 直到 11 年前

Tom 15 年前

不能用关闭标记 /> 你需要用一个 <a href="#">Link</a>

双重呈现是Firefox/Firebug解析无效的HTML。

Yi Jiang G-Man 15 年前

首先,如果你知道你要写糟糕的代码,至少提前让浏览器知道。用更宽容的态度 doctype 比 strict

其次,与大多数其他语言不同,网格框架和类似的辅助工具实际上更适合中级和高级用户。那些刚接触CSS的人更容易被它们搞糊涂。(我知道这是主观的,但这是许多人表达的一种情感,我们在这里给出建议,不是吗?)

现在是网站的标志。我想这是个人喜好的问题,但通常会看到标志被标记为 h1 s、这里有多种方法可以实现你想要的,我就给你一个我习惯使用的方法:

<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 . 和 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;
}

显示:块 部门

哦,我真的 真正地 很抱歉,如果你觉得这句话冒犯了你。我真的是。把这当作我的补偿,好吗?

Robusto 15 年前

试着别让我失望 <a> <a href="blah">Text or  </a> .