브라우저 비율이 다를 때 추가 상자가 나타납니다

브라우저의 크기에 상대적으로 크기와 위치가 결정되는 클릭 가능한 상자를 만들려고하지만 브라우저의 너비를 줄이고 길이를 늘리면 추가 상자가 생깁니다. 무슨 일이 일어나고 있는지, 어떻게 제거 할 지 잘 모르겠습니다. 여기 브라우저 비율이 다를 때 추가 상자가 나타납니다

은 무슨 일이 일어나고 있는지의 화면 캡처입니다 - 전체 크기 브라우저 : 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

브라우저 비율이 다를 때 추가 상자가 나타납니다

답변

관련 문제