2011-05-13 22 views
7

Garip sorun, IE/8/9'da Opaklık uygulandığında ancak 7'de DEĞİLDİR!
Temel olarak, ekranın üstünde sekmeler içeren bir menü var. yani: yıldızlar hakkındaSon derece garip IE7/8 kenarlık/opaklık uyumluluğu sorunu

<table> 
<tr> 
    <td class="tab">button 1...<*/td> 
    <td class="tab">button 2....<*/td> 
    . 
    . 
    . 
</tr> 
</table> 

<style> 
td 
{ 
    opacity: 0.45; 
    filter:alpha(opacity=45); 
    . 
    . 
    . 
} 
td.tab:hover 
{ 
    opacity: 1; 
    filter:alpha(opacity=100); 
} 

Maalesef, şu çalışma kod bloğu biçimlendirme alamadım.
Temel olarak, bu, sadece farenin üzerine geldiğinde düğmelerin yerini kaldırması gerekiyor, ancak kenarlıklar kayboluyor! Bu sorun yalnızca IE8/9'da gerçekleşir, ancak her şey IE7, FF, Chrome, Safari'de iyi çalışır.
Bazı garip IE8 + kenarlık/opaklık sorunları için internette dolaştım ama hiç yok.
Benzer bir şeyle karşılaştı mı?

+0

Sadece aynı sorunu yaşamıştır ve ben clueless değilim. –

+0

Tablo hücreleriniz için arka plan rengi ayarınız var, çünkü yalnızca arka plan rengi ayarlandığında görünür. –

+0

Bu soruya göre, IE8'deki http://stackoverflow.com/questions/3465346/table-cell-loses-border-when-css-gradient-filter-is-applied-in-ie8 tablo kenarlıklarının bile Diğer filtreler –

cevap

3

filter stili, IE7 içindir ve yalnızca daha düşüktür.

IE8, bunun yerine -ms-filter (bir satıcı önekiyle) kullanılmasını gerektirir. Ayrıca, sözdizimi IE8'de daha karmaşıktır. Bu şuna benzer:

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 

IE9 tamamen filter desteğini düşünceye ve diğer tüm browsrs olduğu gibi aynı şekilde çalışır standart CSS3 opacity, değiştirir.

Quirksmode.org tam detaylara sahip: http://www.quirksmode.org/css/opacity.html

+0

IE8 yolunu kullanarak bir filtre yazma meselesi olduğunu düşünmüyorum. En kötü durumda yanlış yazılmış bir filtre, opaklığı etkilemez. Burada sorun, tablo hücreleri sınırının ortadan kalkmasıdır. –

+0

filtre: alpha (opaklık = 100); // 0 ile 100 – KBN

0

Bu defa, sana bir çözüm olabilir tablo hücrelerinin background-color çıkarmadan sanmıyorum keşfetti budur.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <style type="text/css"> 
     table {border-top:1px solid #cccccc; border-left:1px solid #cccccc;} 
     table td {border-bottom:1px solid #cccccc; border-right:1px solid #cccccc; padding:3px;}  
     table tr.opaque td { 
     -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
     filter:alpha(opacity=100); opacity:1;} 

     /* By adding background-color below, the table borders cells disappears 
     in IE8. It's just the nth Microsoft's trigger tree! 
     IE7 does not have this issue. */ 
     table tr.opaque td {background-color:#ffffff;} 
    </style> 
</head> 
<body> 
<table border="0" cellpadding="0" cellspacing="0"> 
    <tr><td><p>column 1</p></td><td><p>column 2</p></td><td><p>column 3</p></td></tr> 
    <tr class="opaque"><td><p>column 1</p></td><td><p>column 2</p></td><td><p>column 3</p></td></tr> 
    <tr><td><p>column 1</p></td><td><p>column 2</p></td><td><p>column 3</p></td></tr> 
</table> 
</body> 
</html> 

Ve bu background-color IE8 uygulanır güzel sonucudur:

enter image description here

+0

arasında değişiyor. En sonunda, td'den arka plan rengini td içindeki bir div'e (boş görünmek için td'den biraz daha büyük olmalıydı) geçirmem gerekti. td ve arka planında sınır: td'de yok; – Eugene

+0

@Metatron: ilginç yeni IE8 kesmek. Çözümü deneyeceğim ve bilmeni istiyorum. Bu fikri paylaştığınız için teşekkür ederiz. –

İlgili konular