Firefox 및 Safari에서 테이블 셀의 오른쪽 하단 모서리에 이미지 배치가 수행되지 않습니다.

Question

다음 aspx 페이지 구조가 있습니다. 테이블 셀의 오른쪽 하단 모서리에 이미지를 배치해야합니다. 아래의 코드는 IE와 Chrome에서 잘 작동합니다. 그러나 파이어 폭스와 사파리에서는 이미지가 셀이 아닌 행의 오른쪽 하단에 표시됩니다.

<table style="width:100%"> 
    <tr> 
    <td valign="top" style="width:20%; position:relative"> 
     <div> 
     //some controls here 
     </div> 
     <img src="~/images/Index.JPG" runat="server" style="position:absolute; right:0; bottom:0"/> 
    </td> 
    <td valign="top" style="width:80%"> 
     <div> 
     //control here 

     </div> 
    </td> 
    </tr> 
    &nbsp; 
    <tr> 
    <td align="center" colspan="1" style="width: 20%"> 
     //control here 
     </td> 
     <td align="center" colspan="2" style="width: 80%"> 
     </td> 
    </tr> 
    <tr> 
     <td align="center" style="width:100%" colspan="2"> 
     //control here 
     </td> 
    </tr> 
    </table> 

도와주세요! 감사합니다. .

Answer 1

상대를

나는이 문제를 해결 이미지에 다른 행을 추가하고 정렬을 설정하십시오.

  <tr> 
      <td style="width: 20%;" align="right" valign="bottom"> 
      <asp:Image ID="Img1" runat="server" /> 

      </td> 
     </tr> 

Answer 2

난 당신이 위치를 제거 할 필요가 있다고 생각 : 이미지의 절대로이 이미지의 부모 TD의 상대적 위치에있는 TD를 기준으로 수행됩니다

<table style="width:100%"> 
    <tr> 
    <td valign="top" style="width:20%;"> 
     <div> 
     //some controls here 
     </div> 
     <img src="~/images/Index.JPG" runat="server" style="position:absolute; right:0; bottom:0"/> 
    </td> 
    <td valign="top" style="width:80%"> 
     <div> 
     //control here 

     </div> 
    </td> 
    </tr> 
    &nbsp; 
    <tr> 
    <td align="center" colspan="1" style="width: 20%"> 
     //control here 
     </td> 
     <td align="center" colspan="2" style="width: 80%"> 
     </td> 
    </tr> 
    <tr> 
     <td align="center" style="width:100%" colspan="2"> 
     //control here 
     </td> 
    </tr> 
    </table>