IE8 - روابط الملاحة لا تعمل

Question

مهلا كل ذلك - لقد كنت googling هذا قدر الإمكان، ولكن لا شيء أقوم به يبدو للمساعدة.

لقد كنت أعمل على موقع ويب (www.philipdukes.co.uk)، وعلى الرغم من أن NAV يبدو أنه يعمل بشكل جيد في FF، Safari، Chrome، حتى IE6 (بأعجوبة)، على نظامي هنا فاشل بائسة في IE8: روابط الملاحة لا تعمل.

أحضرها، احصل على الرسوم المتحركة المتزبر، لكنها ليست "قابلة للنقر". إنها روابط نصية أساسية، ومحاذاة النص من الشاشة، ثم المنطقة التي يمثلونها قابلة للنقر. الصورة التي تملأ المساحة ليست الرابط. إذا قمت بإزالة الصورة، يمكنني النقر فوق المنطقة، وإذا قمت بإزالة محاذاة النص، يمكنني النقر فوق نص الارتباط (ولكن نص الرابط فقط).

إنه يدفعني إلى المكسرات، كما هو آخر شيء أحتاج إلى فرزه قبل كل شيء يعمل بشكل كامل ...

رمز شريط NAV هنا:

    <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;
}

Answer 1

أنت مفقود:

.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 بت شفافة بالكامل، بكسل واحد بيكسل. SHIM PNG 8 بت أصغر من نفس البعد (1 بكسل) GIF، وسيظل كل شيء يعمل كما هو مخطط له.

Answer 2

قدم نفس الأنماط إلى IE8 التي تعمل على IE7، ثم ضع العنصر التالي في رأس المستند:

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

هذا سيجعل IE8 محاكاة IE7. لأنك لا تواجه أي مشاكل مع IE7، أفترض أن هذا سيعمل من أجلك.

Answer 3

ليس بالتأكيد تماما ما يحدث هناك، ولكن يبدو أنه نوع من المشكلة (ربما علة IE8) مع طبقات الرابط وعناصر الصور. عندما أغير z-index من .nav img, .nav2 img إلى أي قيمة سلبية بدلا من 50، ثم تصبح الروابط قابلة للنقر.

لست متأكدا مما إذا كان ذلك إمكانية عملية في هذه الحالة، لأن مؤشر Z السلبي قد يتسبب في أن تكون الصور لم تعد مرئية.