當瀏覽器比率不同時出現額外的框

我試圖創建一個可點擊的框，其大小和位置相對於瀏覽器的大小如何，但當我減小瀏覽器的寬度並增加長度時，我會得到一個額外的框。我不確定發生了什麼，以及如何擺脫它。當瀏覽器比率不同時出現額外的框

這裏是正在發生的事情的截屏： - 瀏覽器在全尺寸：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表示讚賞，因爲我是新的對此。

謝謝。

來源

2013-07-22 wpakt

你可以將你的代碼複製到jsfiddle併發布鏈接？或者，您是否將它託管在我們可以查看的地方？我想查看瀏覽器調整大小時生成的代碼是什麼 – Katstevens

我上傳了代碼：https：//github.com/jennc11/site。我不認爲這是當我真正上傳圖像，而不是在CSS中創建一個空框，所以我可以嘗試該方法。但找出它爲什麼這麼做會很有趣。 – wpakt

儘管看起來很簡單，但通過不關閉錨標記，瀏覽器會生成兩個錨 - 一個在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。不敢相信這花了我這麼久！

來源

2013-07-22 03:47:05 Katstevens

哦，我的！謝謝！我無法相信花了幾個小時看着它，錯過了那個。 – wpakt

當瀏覽器比率不同時出現額外的框

回答

相關問題