Opacity CSS không hoạt động trong IE8

Question

Tôi đang sử dụng CSS để chỉ ra văn bản kích hoạt cho phần trượt jQuery: tức là khi bạn di chuột qua văn bản kích hoạt, con trỏ sẽ thay đổi thành con trỏ và độ mờ của văn bản kích hoạt bị giảm để chỉ ra rằng văn bản có hành động nhấp chuột.

Tính năng này hoạt động tốt trong Firefox và Chrome, nhưng trong IE8 độ mờ đục không thay đổi.

Tôi đã thử nhiều cài đặt CSS khác nhau mà không thành công.

Ví dụ

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

Có gì dừng IE thay đổi opacity? Lưu ý: Tôi đã thử điều này trên nhiều yếu tố khác nhau, hoán đổi thứ tự các câu lệnh CSS và chỉ sử dụng các câu lệnh của IE. Tôi cũng đã thử sử dụng

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

nhưng không thành công.

Tôi đã hết hàng để thử sửa đổi độ mờ đục hoạt động trong IE8.

Bất kỳ ý tưởng nào?

Answer 1

Không có ý tưởng nếu điều này vẫn áp dụng cho 8, nhưng lịch sử IE không áp dụng nhiều kiểu cho các phần tử không "có bố cục".

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

Answer 2

Thiết này (giống hệt như tôi đã viết) đã phục vụ tôi khi tôi cần nó:

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

Answer 3

Bạn cần phải thiết lập Opacity đầu tiên cho các trình duyệt tiêu chuẩn phù hợp, thì khác nhau các phiên bản của IE. Xem Ví dụ:

nhưng mã opacity này không làm việc trong ie8

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

Lưu ý rằng tôi loại bỏ moz như Firefox là một trình duyệt tiêu chuẩn phù hợp và dòng đó là không còn cần thiết. Ngoài ra, nó cũng bị giảm giá, vì vậy tôi cũng loại bỏ phong cách đó.

Bên cạnh đó, các bộ lọc của IE sẽ không xác nhận tiêu chuẩn w3c, vì vậy nếu bạn muốn trang của bạn để xác nhận, tách tiêu chuẩn stylesheet của bạn từ stylesheet IE của bạn bằng cách sử dụng một câu lệnh if IE như dưới đây:

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

Nếu bạn tách biệt các gợi ý, trang web của bạn sẽ xác thực tốt.

Answer 4

đây là câu trả lời cho IE 8

và nó hoạt động cho alpha để làm việc trong IE8 bạn phải sử dụng vị trí atribute cho yếu tố đó như

position: relative hoặc khác.

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

Answer 5

minh bạch Rõ ràng alpha chỉ hoạt động trên các yếu tố mức khối trong IE 8. Set display: block.

Answer 6

Sử dụng display: inline-block; hoạt động trên IE8 để giải quyết vấn đề này.

FWIW, opacity: 0.75 hoạt động trên tất cả các trình duyệt tuân thủ tiêu chuẩn.

Answer 7

Không có câu trả lời nào ở trên phù hợp với tôi, vì vậy tôi chỉ đưa thẻ DIV của mình làm hình nền trong suốt thay thế, hoạt động hoàn hảo cho tất cả các trình duyệt.

Answer 8

Mã này hoạt động

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

Bạn cần phải thêm bất động sản zoom cho nó hoạt động :)

Answer 9

Bạn cũng có thể thêm một polyfil để cho phép sử dụng opacity bản địa IE6-8.

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

Đây là một độc lập polyfil mà không yêu cầu jQuery hoặc các thư viện khác. Có một số cảnh báo nhỏ nó không hoạt động trên các kiểu nội tuyến và đối với bất kỳ tờ định kiểu nào cần có độ mờ đục, chúng phải tuân thủ chính sách bảo mật gốc.

Cách sử dụng là chết đơn giản

<!--[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> 

Answer 10

CSS

tôi sử dụng để sử dụng sau đây từ CSS-Tricks:

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

Compass

Tuy nhiên, một giải pháp tốt hơn là sử dụng Opacity Compass mixin, tất cả những gì bạn cần làm là @include opacity(0.1); và nó sẽ chăm sóc của bất kỳ vấn đề qua trình duyệt cho bạn. Bạn có thể tìm thấy một ví dụ here.