Question

我正在为我的网站制作标准标题/导航。

我开始使用html，body元素的CSS“高度”值为100％，但这导致了错误的布局。

但是，当我将CSS高度属性从“100％”更改为“auto”时，布局是正确的，但我丢失了锚点。文本仍然存在（例如“建议”，“操作”，“主页”，帮助“）但锚点（按列表项组织）不再出现在导航中。我不能再点击它们了。

为什么会这样？

这是我的CSS：

html,body {
    height: auto;   /* This is the only property that I'm toggling */
    margin: 0; 
}
body {
    margin: 0;
    min-width: 978px;
    font: 12px/16px Arial, Helvetica, sans-serif;
    color: #000;
    background: #000001 url('../images/bg-body.jpg') no-repeat 50% 0;  
}
#nav {
    position: relative;
    float: left;
    margin: 0;
    padding: 0 2px 0 271px;
    list-style: none;
    background: url('../images/sep-nav.gif') no-repeat 100% 0;   
}
#nav li {
    float: left;
    padding: 11px 0 0 2px;
    height: 35px;
    width: 128px;
    line-height: 22px;
    font-size: 18px;
    text-align: center;
    background: url('../images/sep-nav.gif') no-repeat 0 -1px;
    display: inline;    
}
#nav li a {color: #FFFEFE;}
.....

这是标题HTML：

<body>
    <div id="wrapper">

        <!-- header -->
        <div id="header">

                    <!-- logo -->
                    <h1 class="logo"><a href="home">Site Name</a></h1>

                    <!-- Feedback button -->
                    <div class="feed-w1">
                    <div class="feed-w2">
                <div class="feed">
                <span class="l"><a href="#">Feedback, please</a></span><span class="r"></span>
                        </div>
                    </div>
                </div>

                <!-- Small links -->
                <div class="top-nav">
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Feedback</a></li>
                        <li><a href="#">Settings</a></li>
                        <li><a href="#">Help</a></li>
                        <li><a href="#">Sign out</a></li>
                    </ul>
                </div>

                <!-- Main Navigation -->
                <div class="frame">
                    <div class="holder">
                        <ul id="nav">
                            <li><a href="#">Advice</a></li>
                            <li><a href="#">Do it</a></li>
                            <li><a href="#">Your Profile</a></li>
                        </ul>
                        <!-- Search box -->
                        <div class="search-form">
                            <form action="#">
                                <fieldset>
                                    <legend class="hidden">Search Form</legend>
                                    <input class="text" type="text" value="Search" title="Search" />
                                    <input class="submit" type="submit" value="Search" />
                                </fieldset>
                            </form>
                        </div>
                    </div>
                </div>

                            </div>  
                </div>
    </body>

当html，body height属性设置为“auto”与“100％”并且它们相同时，我比较了Firebug中的计算CSS。

有人可以说明在将高度设置为“自动”时如何保留导航中的锚点？

感谢您的帮助。

Answer 1

JMan，我在示例页面上运行代码时没有看到任何问题

一个建议 - 检查您的DOCTYPE声明

我严格使用“严格”:)（双关语）

或者

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

或

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

（我用第一个试了你的例子）

干杯，

希望您找到问题的解决方案

更改CSS高度属性会删除锚点？

1 个答案: