IE8 - 탐색 링크가 작동하지 않음

StackOverflow https://stackoverflow.com/questions/1841842

문제

안녕하세요 여러분 - 가능한 한 많이 인터넷 검색을 해봤지만 도움이 되지 않는 것 같습니다.

저는 웹사이트(www.philipdukes.co.uk)에서 작업하고 있는데 탐색 기능이 FF, Safari, Chrome, 심지어 IE6에서도 잘 작동하는 것 같지만(기적적으로) 여기 제 시스템에서는 IE8에서 비참하게 실패합니다.탐색 링크가 작동하지 않습니다.

그 위로 마우스를 가져가면 롤오버 애니메이션이 표시되지만 "클릭할 수"는 없습니다.이는 기본 텍스트 링크로, 화면에서 텍스트 정렬되어 표시되는 영역을 클릭할 수 있어야 합니다.공간을 채우는 이미지는 링크가 아닙니다.이미지를 제거하면 해당 영역을 클릭할 수 있고, 텍스트 정렬을 제거하면 링크 텍스트(링크 텍스트만)를 클릭할 수 있습니다.

모든 것이 완전히 작동하기 전에 정렬해야 할 마지막 작업이기 때문에 나를 미치게 만듭니다 ...

탐색 모음의 코드는 다음과 같습니다.

    <div class="navHolder">
    <div class="nav current-home">
        <div id="home"><img src="images/nav/home.png" alt="home." /><a href="index.html">home.</a></div>
        <div id="bio"><img src="images/nav/bio.png" alt="biography." /><a href="bio.html">biography.</a></div>
        <div id="media"><img src="images/nav/media.png" alt="media." /><a href="media.html">media.</a></div>
    </div>
    <div class="nav2 current-home">
        <div id="press"><img src="images/nav/press.png" alt="press." /><a href="press.html">press.</a></div>
        <div id="pdr"><img src="images/nav/pdr.png" alt="plane dukes rahman trio." /><a href="pdr.html">Plane Dukes Rahman Trio.</a></div>
        <div id="contact"><img src="images/nav/contact.png" alt="contact." /><a href="contact.php">contact.</a></div>
  </div>

CSS 스타일은 여기에 있습니다(여기서 최적화하는 것도 환영합니다!).

    /*
*
*   BEGIN NAV SECTION
*
*/
.navHolder{
    position: relative;
    width: 100%;
    height: 100px;
    margin: 0;
    padding: 0;
}
.nav, .nav2 {
    width: 600px;
    height: 50px;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
    top: 0;
}
#home, #bio, #media, #press, #pdr, #contact{
    position: absolute;
    top: 0px;
    overflow: hidden;
    width: 200px;
    height: 50px;
    background: url(images/nav/nav-back.png) 0 0 no-repeat;
}
.nav a, .nav2 a{
    position: absolute;
    z-index: 100;
    display: block;
    top: 0px;
    height: 50px;
    width: 200px;
    text-indent: -9000px;
}
.nav img, .nav2 img{
    position: relative;
    z-index: 50;
    width: 200px;
    height: 50px;
}
#home, #press{
    left: 0;
}
#bio, #pdr{
    left: 200px;
}
#media, #contact{
    left: 400px;
}
.current-home #home, .current-bio #bio, .current-contact #contact, .current-press #press, .current-pdr #pdr, .current-media #media{
    background-position: 0 -246px;
}
도움이 되었습니까?

해결책

너는 그리워하고있다:

.nav a, .nav2 a  {
    left: 0;
}

그러면 문제가 해결될 것입니다.항상 수직(top 또는 bottom) 그리고 수평의 (left 또는 right) 사용시 배치 position:absolute.

업데이트

언제든지 background 설정되면 예상대로 작동하기 시작합니다.많은 테스트를 통해 문제를 해결하는 다른 방법을 찾을 수 있을 것입니다.그러나 이것이 내가 할 일이다:

가장 좋은 방법은:

  1. 를 없애거나 img 태그를 지정하거나 숨기고 대신 다음과 같이 적용하세요. background-image 너의 ~에게 a 태그.
  2. 변경 position 에 a 태그 relative 대신에 absolute 그들은 부모의 눈에 보이는 유일한 자식이 되기 때문입니다. div

빠른 방법

.nav a, .nav 2 { background: url(/images/shim.png) }

어디 shim.png 8비트 완전 투명한 1픽셀 PNG입니다.8비트 PNG shim은 동일한 치수(1픽셀) gif보다 작으며 모든 것이 계획대로 작동합니다.

다른 팁

IE7에 제공하는 것과 동일한 스타일을 IE8에 제공한 후 문서 헤드에 다음 요소를 넣습니다.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

이렇게 하면 IE8이 IE7을 에뮬레이트하게 됩니다.IE7에는 아무런 문제가 없기 때문에 이것이 효과가 있을 것이라고 생각합니다.

무슨 일이 일어나고 있는지 완전히 확신할 수는 없지만 링크와 이미지 요소의 계층화에 일종의 문제(IE8 버그일 수도 있음)가 있는 것 같습니다.내가 변경할 때 z-index ~의 .nav img, .nav2 img 50 대신 음수 값으로 설정하면 링크를 클릭할 수 있게 됩니다.

하지만 이 경우에 이것이 실제로 가능한지 확실하지 않습니다. 왜냐하면 음의 Z-인덱스로 인해 이미지가 더 이상 표시되지 않을 수 있기 때문입니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top