1

我正在尝试创建一个可点击的框，该框的大小和位置与浏览器的大小有关，但是当我减小浏览器的宽度并增加长度时，我会得到一个额外的框。我不确定发生了什么以及如何摆脱它。

以下是正在发生的事情的屏幕截图： - 全尺寸浏览器：http: //i.imgur.com/mbyMOyw.png - 如上所述拉伸浏览器：http: //i.imgur.com/kuX1tdN.png

CSS：

img.banner {
    width: 100%;
    z-index: 0
}

#banner {
    width: 100%;
    margin-top: 0px;
    margin-bottom: auto;
    margin-left: 0px;
    margin-right: auto;
    position: relative
}

a.rollover {
    display: block;
    position: absolute;
    top: 15%;
    left: 15%;
    width: 17%;
    height: 8%;
    background-color: black;
}

HTML：

<body>
<div id="banner">
    <img src="image.png" class="banner"/>
    <a href="banner1.png" class="rollover">
</div>
</body>

此外，感谢任何其他改进我的 CSS 和 HTML 的建议，因为我是新手。

谢谢。

4

1 回答 1

0

虽然看起来很简单，但通过不关闭锚标记，浏览器会生成两个锚点——一个在 div 内部，一个在 div 外部。这些布局相互叠加，直到浏览器调整大小：然后它们的位置稍微偏离并“分裂”。通过关闭锚来修复：

<body>
<div id="banner">
    <img src="image.png" class="banner"/>
    <a href="banner1.png" class="rollover"></a>     <--added closing tag here
</div>
</body>

你可以在这里查看小提琴。不敢相信我花了这么长时间！

于 2013-07-22T03:47:05.023 回答