Question

我正在尝试构建一个包含灯箱的页面 - 但我不想要任何javascript。

我找到了一个如何做到这一点的教程，但是当我开始添加它时，我注意到每次点击链接时，它都会向下滚动，隐藏页面的顶部边框。

我怎么能阻止这个？因为它破坏了网站的外观

HTML

<div id="container">
    <div id="header-row">
        <div class="logo span4">
            <h1>Title <span>.</span></h1>
        </div>
    </div>
    <div id="content">
       <p></p>
    </div>
</div>

<ul id="lightboxes">
    <li id="close"></li>
    <li id="lightbox-form">
        <div class="box">
            <h3>About</h3>
            <p>
            </p>
            <a href="#close" class="close" title="close window">x</a>
          </div>
        <!--[if IE]>
        <div class="ie-bg"></div>
        <![endif]-->
    </li>
</ul>

CSS

html, body {
background: #f8f8f8 url(../img/pattern.jpg);
height: 100%;
width: 100%;
margin: 0;
padding: 0;
border-top: 2px solid #e75967;}


strong { font-weight: 700; }
a:hover { text-decoration: none; }

::-moz-selection { background: #e75967; color: #fff; text-shadow: none; }
::selection { background: #e75967; color: #fff; text-shadow: none; }

.logo h1 {
margin-top: 7px;
padding-left: 50px;
font-family: 'Lobster', cursive;
font-size: 38px;
font-weight: 400;
color: #555;
}

.logo h1 span { color: #e75967; }

#container {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: auto;}

/* ---------------------------------------------------------- */
/* LIGHTBOXES
/* ---------------------------------------------------------- */
#lightboxes {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
list-style-type: none;
text-align: left;
overflow: hidden;}

#lightboxes li {
width: 100%;
height: 9999px;
position: relative;
background: rgba(0,0,0,.5);}

#lightboxes .box {
position: absolute;
width: 400px;
height: 400px;
left: 50%;
top: 50px;
border: 10px solid #999;
margin-left: -230px;
background-color: #fff;
padding: 20px;}

#lightboxes h3 {
font-weight: normal;
font-size: 1.8461em;
margin: 0 0 0.4583em 0;}

#lightboxes a.close {
position: absolute;
top: 20px;
right: 20px;
display: block;
width: 20px;
line-height: 20px;
text-align: center;
background-color: #ddd;
text-decoration: none;
font-weight: bold;
color: #999;
font-size: 1.2em;}

#lightboxes a.close:hover {
background-color: #999;
color: #fff;}

#lightboxes #close {
background-color: transparent;
z-index: -1;}

这是JSFiddle

对不起所有代码 - 但它不会让我发布它没有它

Answer 1

<a href="#close" class="close" title="close window">x</a>

在这样的链接中使用#close会使您的浏览器跳转到该ID

Answer 2

没有确切地指出哪些元素有所不同，但你可以简单地添加你的CSS：

*
{
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

它不会再跳了。

单击“链接”时页面向下滚动

2 个答案: