Bir jQuery aşağı açılır bölümü için tetikleyici metnini belirtmek için CSS kullanıyorum: yani tetikleyici metnin üzerine geldiğinizde imleç bir işaretçiye dönüşür ve metnin bir tıklama eylemi olduğunu belirtmek için tetikleyici metnin opaklığı azaltılır .

Firefox ve Chrome'da bu iyi çalışıyor, ancak IE8'de opaklık değişmiyor.

Herhangi bir başarı olmadan çeşitli CSS ayarlarını denedim.

Örneğin

HTML:

<h3 class="slidedownTrigger">This is the trigger text</h3>

CSS:

.slidedownTrigger
{
    cursor: pointer;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: alpha(opacity=75);
    -khtml-opacity: 0.75;
    -moz-opacity: 0.75;
    opacity: 0.75;
}

IE'nin opaklığı değiştirmesini engelleyen nedir? Not: CSS ifadelerinin sırasını değiştirerek ve sadece IE olanları kendi başlarına kullanarak çeşitli farklı öğeler üzerinde denedim. Ben de kullanmayı denedim

-ms-filter: "alpha(opacity=75)";

ama başarılı olamadı.

IE8'de opaklık modifikasyonu almak için şeyler tükendi.

Herhangi bir fikir?

Bu hala 8 için geçerli, ancak geçmişte IE "düzeni" olmayan öğelere birkaç stil uygulamazsa hiçbir fikrim yok.

bkz. http://www.satzansatz.de/cssd/onhavinglayout.html

Bunları ayarlamak (tam olarak yazdığım gibi) ihtiyacım olduğunda bana hizmet etti:

-moz-opacity: 0.70;
opacity:.70;
filter: alpha(opacity=70);

Opaklığı önce standartlara uygun tarayıcılar, ardından çeşitli IE sürümleri için ayarlamanız gerekir. Örneğe bakın:

ancak bu opaklık kodu ie8'de çalışmaz

.slidedownTrigger
{
    cursor: pointer;
    opacity: .75; /* Standards Compliant Browsers */
    filter: alpha(opacity=75); /* IE 7 and Earlier */
    /* Next 2 lines IE8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
}

Firefox'un Standartlara Uyumlu bir tarayıcı olması nedeniyle -moz'u kaldırdığımı ve bu satırın artık gerekli olmadığını unutmayın. Ayrıca, -khtml amortismana tabi tutulur, bu yüzden bu stili de ortadan kaldırdım.

Ayrıca, IE'nin filtreleri w3c standartlarına göre doğrulanmayacaktır, bu nedenle sayfanızın doğrulanmasını istiyorsanız, aşağıdaki gibi bir if ifadesi kullanarak standart stil sayfanızı IE stil sayfanızdan ayırın:

<!--[if IE]>
<link rel="stylesheet" type="text/css"  href="http://www.mysite.com/css/ie.css" />
<![endif]-->

Yani tuhaflıkları ayırırsanız, siteniz iyi bir şekilde doğrulanır.

Görünüşe göre alfa saydamlığı yalnızca IE 8'deki blok düzeyi öğelerinde çalışır. Display: block'u ayarlayın.

Kullanılması display: inline-block;IE8 üzerinde çalışmalarını bu sorunu çözmek için.

FWIW, opacity: 0.75standartlara uygun tüm tarayıcılarda çalışır.

CSS

CSS-Tricks'ten aşağıdakileri kullanırdım :

.transparent_class {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Netscape */
  -moz-opacity: 0.5;

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;
}

Pusula

Bununla birlikte, daha iyi bir çözüm Opacity Compass mixin kullanmaktır, yapmanız gereken tek şey, @include opacity(0.1);tarayıcılar arası sorunları sizin için halledecektir. Burada bir örnek bulabilirsiniz .

IE 8 için cevap

VE alfa IE8 çalışmak için çalışır gibi bu öğe için konum özniteliği kullanmak zorunda

pozisyon: göreceli veya diğer.

http://www.codingforums.com/showthread.php?p=923730

Yukarıdaki cevapların hiçbiri benim için işe yaramadı, bu yüzden DIV etiketime şeffaf bir arka plan görüntüsü verdim, bu tüm tarayıcılar için mükemmel çalıştı.

Bu kod çalışıyor

filter: alpha(opacity = 50); zoom:1;

Çalışması için zoom özelliği eklemeniz gerekir :)

IE6-8'de yerel opaklık kullanımını etkinleştirmek için bir polifil de ekleyebilirsiniz.

https://github.com/bladeSk/internet-explorer-opacity-polyfill

Bu, jQuery veya diğer kütüphaneleri gerektirmeyen bağımsız bir polifildir. Hat içi stiller üzerinde çalışmayan birkaç küçük uyarı vardır ve opaklık gerektiren herhangi bir stil sayfası için aynı kökenli güvenlik politikasına uymaları gerekir.

Kullanım çok basit

<!--[if lte IE 8]>
    <script src="jquery.ie-opacity-polyfill.js"></script>
<![endif]-->

<style>
    a.transparentLink { opacity: 0.5; }
</style>

<a class="transparentLink" href="#"> foo </a>