Làm cách nào để đặt lại hoặc ghi đè bộ lọc CSS của IE?

89

Tôi đang sử dụng thuộc tính 'filter' độc quyền của MS để thử và tạo một phần tử không xấu tương đương với text-shadow và box-shadow của css3;

Tôi đã thực sự làm rất tốt cho đến khi tôi gặp vấn đề này. Có vẻ như khi tôi áp dụng bộ lọc cho một div bên trong một div khác cũng có bộ lọc, các hiệu ứng bộ lọc sẽ được kết hợp trên đối tượng con.

Tôi đã thử sử dụng bộ lọc: không có; để thực hiện một thiết lập lại nhưng không có niềm vui. Tôi cũng đã thử các biến thể khác nhau về cú pháp, tức là "-ms-filter: 'progid: ... Glow ()'", "filter: progid: ... Glow ()", "filter: Glow ()" , Vân vân..

Thử nghiệm trong IE8

css filter internet-explorer

— SpliFF
nguồn

8

Điều này phù hợp với tôi:filter:;

— Web_Designer

1

bộ lọc:; không hoạt động với bộ tiền xử lý css lessphp, bộ lọc: -; mặc dù vậy.

— David Meister

sử dụng filter: ;. điều này tôi đoán sẽ buộc IE phải loại bỏ tất cả các thuộc tính vì nó không phải là một giá trị hợp lệ.

— Bhumi Singhal

3

Sử dụng SCSS, tôi phải sử dụng filter:none;để tránh lỗi Cú pháp.

— Nic Barbier

95

Đã bật thuộc tính boolean , bạn có thể đặt sai hoặc đúng http://msdn.microsoft.com/en-us/library/ms532997%28v=vs.85%29.aspx

Thí dụ:

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(enabled=false)";

— el22or
nguồn

1

Cảm ơn bạn! Điều này đã làm việc cho tôi hai. Tôi có một phong cách nền khó chịu sẽ không biến mất và không thể tìm thấy nó cho dù tôi đã cố gắng thế nào.

— racl101

Cảm ơn! bộ lọc gradient cho nút không chơi độc đáo với sau đó có nút nhất định với hình ảnh nền - bộ lọc đi lên ảnh ...

— Adam

Làm việc như người ở! Cảm ơn bạn!

— Bogdan

20

Thuộc tính -ms-filter là một mục nhập CSS không chuẩn, dành riêng cho trình duyệt và do đó, yêu cầu tham số của nó phải được đặt trong dấu ngoặc kép. Vì vậy -ms-filter: "none" sẽ hoạt động tốt.

— Vịt hồng
nguồn

16

thử cái này:

bộ lọc: -;

— bánh hạnh nhân
nguồn

Làm việc cho tôi trong IE7 trong khi -ms-filter: "progid: DXImageTransform.Microsoft.gradient (enable = false)"; không. Thx

— Simon Arnold

@SimonArnold "-ms-filter" chỉ được hỗ trợ bởi IE8 trở lên; IE7 chỉ hỗ trợ thuộc tính "bộ lọc". Xem msdn.microsoft.com/en-us/library/ie/ms530752(v=vs.85).aspx .

— vee

6

Tôi đã có một số thành công khi định vị bọn trẻ là tuyệt đối hoặc tương đối. Điều này dường như không hoạt động sớm hơn vì vậy nó có thể bị hỏng một lần nữa khi tôi trở nên phức tạp hơn

Tôi nghĩ rằng một khi cha mẹ có một bộ lọc được áp dụng, tất cả những đứa trẻ của nó về cơ bản sẽ trở thành bề mặt directx trong nội bộ. Bạn vẫn có thể chọn văn bản nhưng nó bị trễ. Tôi nghĩ lựa chọn văn bản là một thủ thuật khiến mỗi chữ cái trở thành một bề mặt riêng biệt. Đó là một mớ hỗn độn mà phải đi một chặng đường dài để giải thích tại sao trình duyệt nói chung và các bộ lọc nói riêng lại gặp nhiều lỗi như vậy.

— SpliFF
nguồn

6

Nếu bạn đang sử dụng HTML5, bạn có thể muốn đi xuống lộ trình sử dụng

<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6 oldie"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie7 oldie"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8 oldie"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en" class="gtie9 modern">
<!--<![endif]-->

và trong CSS của bạn, hãy sử dụng những thứ như:

.ie9 .element {filter: none; }

— John C
nguồn

1

Bạn đã thử bật / tắt (các) bộ lọc chưa?

— anddoutoi
nguồn

2

nó không hoạt động, bạn không thể ghi đè bộ lọc cha mẹ khỏi con.

— SpliFF

0

Tôi đã tìm thấy cách tốt nhất là display: inline-block (áp dụng khoảng trắng: nowrap cho vùng chứa). Nhưng nó có vẻ hoạt động không tốt với IE7 trở xuống

— tối đa
nguồn