호버에 이미지 표시를위한 정렬은 IE7에서만 작동합니까?

Question

텍스트 위에 마우스를 올리면 이미지를 표시하려고했습니다. 그것은 잘 작동합니다. 그리고 이미지의 정렬은 이미지의 끝이 컨테이너에 있어야한다. IE7에서만 아래 코드와 같이 작동합니다. 모든 것이 다 잘립니다. 무엇이 잘못 되었습니까?

<td valign="middle" class="table_td td" style="width: 347px"> 
    <span class="feature_text" style="cursor:pointer" 
    onmouseover="ShowPicture('Style16',1)" 
     onmouseout="ShowPicture('Style16',0)" id="a16"> 
       Storefront Window Decal</span> 
    <div id="Style16" style="position:relative;height:0px;left:50%;bottom:700%; 
     visibility:hidden; border:solid 0px #CCC; padding:5px"> 
     <img src="images/window-decal-image.gif"></div> 

<script language="javascript" type="text/javascript"> 
function ShowPicture(id,Source) 
{ 
    var vis, elem; 
    if (1 == Source) 
    { 
     vis = "visible"; 
    } 
    else if (0 == Source) 
    { 
     vis = "hidden"; 
    } 
    else 
    { 
     throw new RangeError("Unknown Flag"); 
    } 

    if (elem = document.getElementById(id)) 
    { 
     elem.style.visibility = vis; 
    } 
    else 
    { 
     throw new TypeError("Element with id '"+id+"' does not exist."); 
    } 
    return vis; 
} 
</script> 

누군가 나를 도울 수 있습니까? 미리 감사드립니다 !!

Answer 1

별도의 <img> 태그 대신 background-image을 사용하고 background-position:right;을 사용하는 것이 좋습니다. 요구 사항에 따라 조정하십시오.

완벽한 CSS를 얻으려면 몇 가지 다른 관련 비트가 필요할 수 있습니다 (background-repeat?).하지만 그렇게하는 것이 좋습니다.

또한 모든 스타일 코드를 별도의 CSS <style> 요소로 옮겨서 HTML 코드의 혼란을 줄이고 더 읽기 쉽게 만들 것을 제안합니다.