1

ブラウザーのサイズに合わせてサイズと位置を調整するクリック可能なボックスを作成しようとしていますが、ブラウザーの幅を減らして長さを増やすと、余分なボックスが表示されます。何が起こっているのか、それを取り除く方法がわかりません。

何が起こっているかのスクリーンキャプチャは次の とおりです。

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

簡単に見えますが、アンカー タグを閉じないことで、ブラウザは 2 つのアンカーを生成しています。ブラウザのサイズが変更されるまで、これらのレイアウトは互いに重なり合っています。その後、それらの位置が少しずれて「分割」されます。アンカーを閉じて修正します。

<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 に答える