왜 요소를 뷰포트 밖으로 이동하여 다시 뷰포트로 이동 시키는가?

Question

그래서 나는 공중제비/선택된 상태의 메뉴를 가지고 있고 그것은 IE6/IE7에서 잘로드됩니다. 그러나 페이지를 아래로 스크롤하여 뷰포트 외부에 요소를 놓은 다음 다시 깨진 이미지를 얻을 때! 나는 전에 이런 문제를 본 적이 없다. 다른 누구와도 솔루션을 제안 할 수 있습니다. 아래에는 작동중인 이미지와 깨진 이미지의 예와 실제 코드에 대한 URL이 나와 있습니다.

alt text http://bjmarine.net/post-load.png -로드

alt text http://bjmarine.net/post-scroll.png 볼은 - 밖으로 스크롤 후 뷰포트에 브로큰 내가 a와 CSS를 배경 이미지 내부의 범위와 슬라이딩 도어 방식을 사용하고

전체에게 메뉴 http://bjmarine.net/samples.htm

건배 @ 찾을 수 데니스

,745,개

솔루션 :

#navigation ul.primary-nav li.selected a.menu-item-hover{height:25px;} 
#navigation ul.primary-nav li.top-level.selected a.menu-item-hover span{height:21px;} 
* html #navigation ul.primary-nav li.residential.selected a.menu-item-hover{width:88px;white-space:nowrap;} 

Answer 1

나는 hasLayout 호와 관련이 있다고 생각합니다.

height 속성을 스타일에 도입하여 Internet Explorer 7 (IE 6이 내 컴퓨터에 설치되어 있지 않음)에서이를 해결할 수있었습니다. IE에 레이아웃이 있음을 알리도록 강제했습니다.

#navigation ul.primary-nav > li.top-level > a.menu-item-hover:hover span, 
#navigation ul.primary-nav > li.top-level:hover > a span, 
#navigation ul.primary-nav > li.top-level.selected > a span{ 
    color:#fff; 
    display:block; 
    margin:-17px 0 0; 
    padding:12px 7px 10px 15px; 
    height: 21px;  /* this is what I added, in global.css */ 
} 

불행히도 요소 높이를 설정하면 수직 위치와 관련하여 여전히 문제가 있습니다. top 속성으로 재생하거나 margin-top 속성에서 더 많이 빼낼 수 있습니다.

Answer 2

이 나에게 IE의 까꿍 버그 같은 소리 - 더 구체적인 조언하지만 빠른 구글은 몇 가지 아이디어를 제공해야합니다.

Answer 3

우선,이 같은 버그를 확인할 때 (더 좋은 것은 항상!) 마크 업과 CSS의 유효성을 검사하여 표준 코드로 작업하고 있는지 확인하십시오. 그렇지 않다면 은에 문제가 있습니다.

마크 업을 빠르게 확인하면 23 개의 오류가 발생합니다!

http://validator.w3.org/check?uri=http%3A%2F%2Fbjmarine.net%2Fsamples.htm&charset=%28detect+automatically%29&doctype=Inline&group=0 그들 중 대부분은 HEAD 섹션에서이다, 부여하지만, 몸에 몇 가지가 있습니다 - 사람들을 해결 한 후 다시 시도하십시오.

다음 : 심지어 버그 마크 업, 상식은 당신이 렌더링에 영향을 미치지 않습니다까지 아래로 스크롤 알려줍니다. 그 은 IE의 버그입니다, 물론, 그래서 당신이 그것을 해결하기 위해 코드를 변경해야 할 질문.

그래서 : - 쿼크 모드는 이을 무슨 뜻인지 해석하는 기대하지 않는다

• 당신은 잘못된 마크 업이있다. 다른 것을 시도하기 전에 그 해결 IE의

• 이전 버전이 '>'CSS 선택기를 좋아하지 않는다 (예를 들어, UL은 비워 둘 수 없습니다). 그것을 없애고 대신 클래스를 사용하십시오.

• 인라인으로 특정 높이와 너비로 표시하려면 display: inline-block 규칙을 사용하십시오. 이는 display: block 대신 올바른 옵션입니다.

• 당신은 부정적인 여백을 가지고있다. 그건 전혀 추천하지 않습니다. 당신은 보통 많은 것을 해결하는 더 나은 방법이 있습니다.

자세히 알 수 있듯이 많은 것들이 버그를 유발할 수 있습니다. 모두 해결하십시오 (버그가없는 경우에도 수행해야 함). 다시 시도하십시오.

당신은 아직도 그것을 얻는 경우는, 마크 업을 리팩토링 생각 - 우리가 해결 방법을 여러 번 찾을 수 있습니다, 그러나 때때로 우리는 적응해야 (우리 단지 수없는 원격 수정 IE 버그 ...)