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之外渲染另一个整个锚元素，这个奇怪甚至可以作为 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方法生成）。

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

Answer 1

您无法使用/>关闭A标记，需要使用<a href="#">Link</a>

关闭它

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

Answer 2

首先，如果您知道自己要编写错误代码，请至少提前告知浏览器。使用比doctype更宽容的strict（从技术上讲，这并没有太大作用，但我认为每一点都有帮助）

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

现在为站点徽标。我认为这是个人偏好的问题，但通常看到标识被标记为h1 s。有多种方法可以实现你想要的东西，我只会给我习惯使用的方法：

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

您的网址不正确：~/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 < / p>

#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也是不必要的 - div是块级元素。

哦，如果您对此评论感到不满，我真的非常抱歉。我真的是。考虑一下我弥补这一点，好吗？

Answer 3

尽量不要让<a>自我关闭。它应该是<a href="blah">Text or  </a>。

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

3 个答案: