Tôi đang sử dụng CSS để chỉ ra văn bản kích hoạt cho phần trượt xuống của jQuery: tức là khi bạn di chuột qua văn bản kích hoạt, con trỏ thay đổi thành một 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 .

Điều này hoạt động tốt trong Firefox và Chrome, nhưng trong IE8, độ mờ không thay đổi.

Tôi đã thử nhiều cài đặt CSS 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;
}

Điều gì ngăn IE thay đổi độ mờ đục? 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 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 mọi thứ để cố gắng để sửa đổi độ mờ hoạt động trong IE8.

Có ý kiến ​​gì không?

Không biết điều này có áp dụng cho 8 hay không, nhưng trong lịch sử IE không áp dụng một số kiểu cho các thành phần không "có bố cục".

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

Thiết lập những thứ này (chính xác như tôi đã viết) đã phục vụ tôi khi tôi cần:

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

Bạn cần đặt Opacity trước cho các trình duyệt tuân thủ tiêu chuẩn, sau đó là các phiên bản IE khác nhau. Xem ví dụ:

nhưng mã opacity này không hoạt động trong eg8

.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 vì Firefox là trình duyệt Tuân thủ Tiêu chuẩn và dòng đó không còn cần thiết nữa. Ngoài ra, -khtml bị mất giá, vì vậy tôi cũng loại bỏ phong cách đó.

Hơn nữa, các bộ lọc của IE sẽ không xác thực các tiêu chuẩn w3c, vì vậy nếu bạn muốn trang của mình xác thực, hãy tách biểu định kiểu tiêu chuẩn của bạn khỏi biểu định kiểu IE bằng cách sử dụng câu lệnh if 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 các quirks tức là, trang web của bạn sẽ xác nhận tốt.

Rõ ràng độ trong suốt alpha chỉ hoạt động trên các phần tử mức khối trong IE 8. Đặt hiển thị: khối.

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

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

CSS

Tôi đã từng sử dụng những điều 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;
}

La bàn

Tuy nhiên, một giải pháp tốt hơn là sử dụng hỗn hợp Opacity La bàn , tất cả những gì bạn cần làm là @include opacity(0.1);và nó sẽ giải quyết mọi vấn đề về trình duyệt chéo cho bạn. Bạn có thể tìm thấy một ví dụ ở đây .

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

VÀ CÔNG TRÌNH CNTT để alpha hoạt động trong IE8, bạn phải sử dụng vị trí thuộc tính cho phần tử đó như

vị trí: tương đối hoặc khác.

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

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

Mã này hoạt động

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

Bạn cần thêm thuộc tính thu phóng để nó hoạt động :)

Bạn cũng có thể thêm một polyfil để cho phép sử dụng độ mờ tự nhiên trong IE6-8.

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

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

Cách sử dụng rấ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>