IE7 이하에서이 CSS 오류를 해결하는 방법은 무엇입니까?

Question

최근에 내 웹 사이트에 일부 CSS를 추가했는데 Internet Explorer 7 이하를 제외한 모든 브라우저에서 완벽하게 작동합니다. 이유는 무엇인지, CSS 전문가가 아닙니다 (아직 :)) 내 CSS가 잘못되었을 수도 있지만 IE7을 만들고 웹 사이트의 모습을 엉망으로 만든 것을 설명해 주시겠습니까? IE8이나 다른 브라우저와 IE7에서 비교해 보면 내가 말하는 것을 볼 수 있습니다. 문제가있는 곳을 지적 할 수 있습니까?

은 웹 페이지 : 사이드 바의 CSS는

http://inelmo.com/inelmo :이

#sidebar { 
    width: 440px; 
    float: right; 
} 

/* Navigation Menu */ 
#navigationMenu { 
    width: 50px; 
    position: absolute; 
    z-index: 99; 
} 

#navigationMenu li { 
    list-style: none; 
    height: 39px; 
    padding: 2px; 
    width: 40px; 
} 

#navigationMenu span { 
    width: 0; 
    left: 38px; 
    padding: 0; 
    position: absolute; 
    overflow: hidden; 
    font-size: 18px; 
    font-weight: bold; 
    letter-spacing: 0.6px; 
    white-space: nowrap; 
    line-height: 39px; 

    -webkit-transition: 0.25s; 
    -moz-transition: 0.25s; 
    -o-transition: 0.25s; 
    -ms-transition: 0.25s; 
    transition: 0.25s; 
} 

#navigationMenu a { 
    background: url("../images/nav_bg.png") no-repeat; 
    height: 39px; 
    width: 38px; 
    display: block; 
    position: relative; 
    text-decoration: none; 
} 

#navigationMenu a:hover span { 
    width: auto; 
    padding: 0 20px; 
    overflow: visible; 
} 

#navigationMenu a:hover { 
    text-decoration: none; 
} 

/* Home Button */ 
#navigationMenu .home { 
    background-position: 0 0; 
} 

#navigationMenu .home:hover { 
    background-position: 0 -39px; 
} 

#navigationMenu .home span { 
    background-color: #7da315; 
    color: #3d4f0c; 
    text-shadow: 1px 1px 0 #99bf31; 
} 

/* Categories Button */ 
#navigationMenu .categories { 
    background-position: -38px 0; 
} 

#navigationMenu .categories:hover { 
    background-position: -38px -39px; 
} 

#navigationMenu .categories span { 
    background-color: #1e8bb4; 
    color: #223a44; 
    text-shadow: 1px 1px 0 #44a8d0; 
} 

/* Top Button */ 
#navigationMenu .top { 
    background-position: -76px 0; 
} 

#navigationMenu .top:hover { 
    background-position: -76px -39px; 
} 

#navigationMenu .top span { 
    background-color: #c86c1f; 
    color: #5a3517; 
    text-shadow: 1px 1px 0 #d28344; 
} 

/* AntiTop Button */ 
#navigationMenu .antiTop { 
    background-position: -114px 0; 
} 

#navigationMenu .antiTop:hover { 
    background-position: -114px -39px; 
} 

#navigationMenu .antiTop span { 
    background-color: #af1e83; 
    color: #460f35; 
    text-shadow: 1px 1px 0 #d244a6; 
} 

/* Logo styling */ 
#logo { 
    width: 390px; 
    margin: 0 0 0 50px; 
    position: absolute; 
    z-index: -1; 
} 

/******/ 
#sideWrapper { 
    width: 437px; 
    background: url("../images/sidebar_strip.png") repeat-x; 
    padding: 15px 0 0 3px; 
    margin: 190px 0 0 0; 
} 

Answer 1

float:xxx을 사용하는 경우 display: inline을 추가하여 이전 IE 동작을 수정해야합니다.

<a>에서만 작동 :hover IE6에서는 수정 : http://peterned.home.xs4all.nl/csshover.html

당신은 실제로 top/left/등을 설정하지 않고 position: absolute;를 사용하는 것 같다.

투명 png를 사용하려면 http://www.twinhelix.com/css/iepngfix/과 같은 'pngfix'를 사용하십시오.

재미있는 버그를 찾으려면 http://haslayout.net/과 같은 Google 사이트를 사용하십시오.

Answer 2

는 사용이 CSS가

을 재설정 (문제는 한 번 시작했기 때문에 나는 단지이 포함, 나는 코드의이 부분을 추가)

CSS 상단에 this code을 추가하십시오.

Answer 3

코드 예제가 없으면 내가 시작하는 사람에게 제안 할 수있는 가장 좋은 방법은 레이아웃을 깨는 정확한 CSS를 찾을 때까지 위의 CSS를 한 줄씩 주석으로 처리하는 것입니다. 내가 사용하는 또 다른 트릭은 모든 것에 배경색을 추가하여 어떤 부분이 손상되었는지 시각적으로 볼 수 있도록하는 것입니다.