H1 이미지 대체는 ie를 제외한 모든 브라우저에 나타납니다.

Question

나는

#header h1 { 
    background-image: url(../images/logo.png); 
    background-repeat: no-repeat; 
    text-indent: -9999px; 
    margin-left: 15px; 
} 
#header h1 a { 
    display: block; 
    height: 120px; 
    width: 400px; 
    margin-top: -135px; 
} 

내가 IE에 대한 사이트의를 최적화하기 위해 노력하고있어 CSS를 이미지 교체, 전에 내 마지막 단계와 FF, 사파리에서 링크를 오페라로 일 내 헤더를 얻을 관리했습니다 월요일에 실행하지만 IE 8이나 9에서는 로고가 전혀 나타나지 않습니다.하지만 IE 7에서는 매우 놀랍습니다. 디스플레이를 인라인 블록으로 만들어 IE9에 표시되도록했습니다.

.ie9 #header h1 { 
    background-image: url(../images/logo.png); 
    background-repeat: no-repeat; 
    text-indent: -9999px; 
    margin-left: 15px; 
} 

.ie9 #header h1 a { 
    display: inline-block; 
    height: 120px; 
    width: 400px; 
    margin-top: -135px; 
} 

비트이 작업을 수행 할 때 이미지가 더 이상 링크가 아니므로 누구든지 문제를 해결할 수있는 방법이 있습니까? 대신 이미지 교체를 사용하는 대신 HTML로 이미지를 넣을 것입니다.하지만 이미지 교체를 사용하는 SEO 관점에서 내 머리를 쥐었습니다.

Answer 1

나는 문제가되는 margin-top: -135px라고 생각합니다. 높이는 120px 밖에되지 않으므로 -15px (높이 - 여백)로 끝나서 H1 태그 아래쪽으로 사라집니다.