Question

我试图创建一个可点击的框，其大小和位置相对于浏览器的大小，但是当我减小浏览器的宽度并增加长度时，我会得到一个额外的框。我不知道发生了什么以及如何摆脱它。

以下是正在发生的事情的屏幕截图： - 全尺寸浏览器：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的建议，因为我是新手。

感谢。

Answer 1

虽然看起来很简单，但是通过不关闭锚标签，浏览器会生成两个锚点 - 一个位于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>

你可以check out the fiddle here。简直不敢相信我花了这么久！

当浏览器比率不同时出现额外的框

1 个答案: