다른 위치 사업부 - HTML의 CSS

Question

내 웹 사이트에 글을 가지고 있고 그것은 크롬에 좋아 보인다 :

:

그러나,이 FF에 좋은하지 보인다

FF로는 내 CSS의 z-index 속성을 인식하지 못합니다. 내가 크롬 & FF가 같은 위치에 순종 코드가 있으므로이 문제에 대한 해결책은

footer.html를

<div id="footer"> 
    <img src="layout/footer.png" style="position:absolute; z-index:-1;"></img> 

      <div class="socmed" style="margin-left:20px;"> 
      <a href="www.facebook.com"> 
      <img src="layout/fb.png"></img> 
      </a> 
      </div> 

      <div class="socmed"> 
      <a href="www.facebook.com"> 
      <img src="layout/tw.png"></img> 
      </a> 
      </div> 

      <div class="socmed"> 
      <a href="www.facebook.com"> 
      <img src="layout/yt.png"></img> 
      </a> 
      </div> 

      <div class="clear"></div> 

</div> 

있는 style.css

#footer { 
    margin-top: 30px; 
    margin-bottom:-10px; 
} 

.socmed{ 
    float:left; 
    margin-left:10px; 
    padding-top:5px; 
} 

있나요 : 여기에 코드입니까? (FF의 위치는 Chrome과 비슷할 것입니다.) 감사.

Answer 1

position:absolute; z-index:-1; 인 <img />은 #footer의 background-image이어야합니다.

#footer { 
    margin-top: 30px; 
    margin-bottom:-10px; 
    background: url('layout/footer.png') no-repeat 0 0; /* this line */ 
} 

그러면 아무 것도하지 않고도 아이콘 뒤에 표시됩니다. 여기의

.socmed{ 
    display: inline-block; /* this line */ 
    margin-left:10px; 
    padding-top:5px; 
} 

:

그런 다음, 당신이 당신의 .socmed에 변경 될 수 있습니다 (부양 자녀가 그래서 당신의 div가 더 이상 높이 없을 것이다, 문서 흐름 꺼내 얻을 때문에) #footer 높이를 가지고 있는지 확인하기 코드에서 업데이트 한 이미지와 Google 이미지에서 가져온 이미지로 업데이트했습니다.

http://jsfiddle.net/9V2KV/