链接/锚元素的基本 html5 问题？答案

【问题标题】：Basic html5 issue with links/anchor elements?链接/锚元素的基本 html5 问题？
【发布时间】：2011-02-25 01:51:30
【问题描述】：

我最终希望重建一个符合网络标准的旧网站，并认为我会尝试在 html5 和 css3 中涉足。我知道这些都不是跨浏览器完全支持的，但我愿意暂时在任何限制范围内工作。

但是，我已经把头撞到了早期的墙上，坦率地说，我现在觉得很愚蠢。我似乎无法在我的代码生成的页面中突出显示文本或打开链接。

html:

<!DOCTYPE html>
<html> 
    <head>
        <meta charset="UTF-8" />
        <title>The Hominis Inquiry: Reconstructing Psychology, Societies, and Human Ecosystems</title>
        <link rel="stylesheet" href="HIcss3.css" />
        <script src="HIjs.js"></script>
    </head>
    <body>
        <div class="title">
            <div id="search">
                <form id="searcher" onclick="startSearch('sbox')">
                    <input type="text" id="sbox" size="15" value="Search This Site"> 
                    <input type="button" id="sbutt" value="Find"> 
                </form> 
            </div> 
        </div>
        <div class="navigation">
            <div id="about"> <a href="about.htm"> About </a> </div>
            <div id="blog"> <a href="blog.htm"> Blog </a> </div>
            <div id="research"> <a href="research.htm"> Research/ Academic Papers </a> </div>
            <div id="hypercourse"> <a href="hypercourses"> Hypercourses </a> </div>
            <div id="links"> <a href="links"> Links </a> </div>
            <div id="contact"> <a href="about.htm#contact"> Contact </a> </div>
        </div>

        <div class="download">
            <a href="http://www.mozilla.com/firefox/" target="_blank">
                Firefox is strongly recommended for viewing this page. Download the latest version free!<img src="firefox.jpg" />
            </a> 
        </div>

        <p>
            Welcome to HI Updates!
        </p>

    </body>
</html>

css:

body {border:0; margin:0; padding:0; vertical-align:top; text-align:center; background-color:#FFDDAA; color:#440000}

h1 {font-size:3em; font-weight:700}
h2 {font-size:1.5em; font-weight:600}
h3 {font-size:1.25em; font-weight:500}
p {}

a {color:#000066; font-weight:600; text-decoration:none}
a:hover {background-color:#FFFFDD}
a:visited {color:#440066}

div.title {position:fixed; width:100%; height:10.5em; background-image:url(hominquiry_laeroprocni.jpg); }


div.download {text-align:left} 
div.download img {border:0; float:left; width:3em; height:3em}

div.navigation {}
#about {}
#blog  {}

这不是我在 html 4 中的最后一个布局的问题，我觉得我一定忽略了一些非常明显的东西......更糟糕的是，它顺利通过了验证器：P

谢谢！

【问题讨论】：

标签： html text hyperlink

【解决方案1】：

您的div.title 是position: fixed，因此它实际上漂浮在您的链接上，因此它们不会从您的鼠标接收悬停或单击事件。删除它来试试看。

与：http://jsfiddle.net/LFTpB/

没有：http://jsfiddle.net/THyke/

【讨论】：

糟糕，测试前忘记指定其他元素位置。感谢您指出这一点！