로고 게재 위치 문제

Question

Vis-a-vis 웹 사이트에서 로고 배치 문제가 발생했습니다. IE를 제외한 모든 브라우저에서 로고가 잘 보입니다. 그래서, 아래 코드를 수정 해 보았습니다 만, 행운은 없습니다. 최상의 솔루션을 기대합니다.

<!--[if !IE]><!--> 
    <style> 
    div.logo img { 
    margin-left:28%; 
    } 
    </style> 
<!--<![endif]--> 

<!--[if IE]><!--> 
    <style> 
    div.logo img { 
    margin-left:10%; 
    } 
    </style> 
<!--<![endif]--> 

감사

Answer 1

몇 가지 (확실한 이유가하지 않기 위하여) Internet Explorer에서 잘못 렌더링된다. 따라서 .wrap 클래스의 크기를 늘리고 로고의 왼쪽 여백을 약간 늘리십시오.

새로운 CSS :

div.logo img { 
    margin-top: -10% !important; 
    margin-left: 29% !important; 
    background-image: url(img/logo-bg.png); 
    background-repeat: no-repeat; 
    background-size: cover; 
    padding: 45px 59px; 
    background-position: center center; 
} 

div.wrap { 
    max-width: 916px; 
    margin: 0 auto; 
} 

편집 : 조건문을 사용하여

READ HERE., 위, IE10을 대상으로 않습니다이 무엇처럼 작동하지 않습니다. IE9 이하 타겟팅은이 방법을 통해 액세스 할 수 없습니다. IE10 이상을 대상으로하려면 다음과 같이 Javascript/jQuery 또는 특정 CSS 미디어 쿼리를 사용해야합니다.

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
     div.logo img { 
     margin-top: -10% !important; 
     margin-left: 29% !important; 
     background-image: url(img/logo-bg.png); 
     background-repeat: no-repeat; 
     background-size: cover; 
     padding: 45px 59px; 
     background-position: center center; 
    } 

    div.wrap { 
     max-width: 916px; 
     margin: 0 auto; 
    } 
}