IE saygı duymamak: elemana aşağıdaki web sitesinde

Question

Work hover: http://cetcolor.com

sahip sayfa başı grafik "About It Oku" butonu görüntüler üzerinde turuncu bir düğme grafiğinin haddelenmiş ve ne zaman bir olduğunu vurgulu bir konumlandırılmış bağlantı vardır tıklanabilir bağlantı. Ancak, IE tarayıcılarında çalışmıyor. İşte

etkilenen HTML:

<div id="header"> 
    <a href="/" title="CET Color"><img src="images/logo.gif" width="147" height="86" alt="CET Color" class="logo"></a> 
    <span class="strapline">Affordable Large-format UV Printing Solutions</span> 
    <a href="/pressroom_article8" class="read_about_it"></a>  
</div> 

Ve burada başvurulan CSS:

#header .read_about_it { 
    position: absolute; 
    top: 239px; 
    left: 803px; 
    z-index: 100; 
    width: 114px; 
    height: 17px; 
} 
#header .read_about_it:hover { 
    background-image: url(/images/masthead_index_read_about_i.jpg); 
    background-repeat: no-repeat; 
    cursor: pointer; 
    z-index: 101; 
} 

kimse vurgulu IE tarayıcılarda çalışmıyor neden bir fikri var mı? Eğer IE6 kullanıyorsanız

Answer 1

Sizin için bir çözüm var. Sadece read_about_it sınıfınız için bir arkaplan rengi veya arka plan resmi tanımlayın.

CSS kodunuzda/veya IE'de belirgin bir mantık hatası var - bakış açısına göre değişir. A etiketiniz boş - Metin değil arka plan (hover durumunuzdaki arka planı değiştirirsiniz). Hepimiz IE'nin kendi dünyasında yaşadığını biliyoruz ve eski Trident motorunu kullanmasına neden olarak HTML'yi farklı şekilde ele alıyoruz. Ancak IE öğesi boşsa (arka plana sahip değilse), vurgulu durumdaki arka planı değiştirmeyecektir, çünkü IE değişmeye veya mevcut olmayan bir şey oluşturmaya gerek olmadığını varsayar.
Şerefe! Ben ettik

Answer 2

o desteklemez: javascript

onmouseover 
onmouseout 

olaylar kullanılarak

ben etrafında aldık

<a> 

dışında herhangi unsurları getirin.

Answer 3

"display: block;" ona ve sizin için çalışmalı.

#header .read_about_it { 
    display: block; 
    position: absolute; 
    top: 239px; 
    left: 803px; 
    z-index: 100; 
    width: 114px; 
    height: 17px; 
} 

Answer 4

aynı sorun var ve ben bu sorunu çözmek ettik:

#header .read_about_it { 
    display: block; 
    background: rgba(255, 255, 255, 0); 
    position: absolute; 
    top: 239px; 
    left: 803px; 
    z-index: 100; 
    width: 114px; 
    height: 17px; 
} 

"arkaplan: RGBA (255, 255, 255, 0)" Bu sorunu çözmek için bir anahtar kelimedir. Ancak IE-7 VEYA eski istemcilere arka plan resmi koyabilirsiniz: url (URL_TO_TRANSPARENT_IMAGE).